jQuery 事件注册和绑定及this与event.target的区别浅析
更新:HHH   时间:2023-1-7


最近小码哥,在研究学习nodejs以及相关框架webpack、express、reactjs等等,为了将来,为了RMB,小码哥牢记自我充电,以备不时之需。

在学习reactjs的时候,在前辈ruanyifeng的博文里看到了一个以前没怎么注意的知识点。是与this和event.target之间的区别有关的。当时感觉就蒙了,发现event.target貌似印象不深啊,,瞬间小码哥开启了奔跑模式,,,

各种baidu,各种Chrome biying等等,发现区分不难,就是比较细致。不细分析,有点晕!


先给个总结,结合前辈的讲解和自己的理解得出:

1、作为前端人员,对于上下文的代表this貌似都不陌生,陌生的就是有时候容易分不清this最后代表的是谁了。在事件注册和绑定上,this指代的是事件注册和绑定的对象元素。即,谁绑定了click等事件,this一般指代谁。在简单的事件里,this又叫上下文。

2、但是,作为前端人员,event.target并不应该陌生,但却又用的不多,,总之,小码哥看到它的时候萌B了,,那event.target代表的有是神马呢?在自己写的demo里,反复试验,总算摸清了,它最终代表的是谁了!event.target和事件绑定及注册关联不大,但是和事件发生的时候,所直接出发的元素有大关联。


以上两点,是文字叙述,有点苍白,,对小白前端来说,估计也会萌B。。。


实践是检验真理的唯一标准,这是某个为人说的。在IT业,实实在在的demo代码是检验事件是否能通的唯一标准。


代码如下:(希望新老码农光看勿喷,默默的哈~)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

</head>


<body class="oBody">

<ul class="oUl" >

      <li class="oLi oLi1">item 1

        <ul class="oOul" >

          <li>sub item 1-a</li>

          <li>sub item 1-b</li>

        </ul>

      </li>

      <li class="oLi oLi2">item 2

        <ul class="oOul" >

          <li>sub item 2-a</li>

          <li>sub item 2-b</li>

        </ul>

      </li>

  </ul>

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>

<script type="text/javascript">

$(function(){

    $(".oUl").children().find("ul").hide();

    // $(".oLi").click(function(){

    //     $(this).children("ul").toggle();

    // });

    // $(".oLi").on("click",function(){

    //     $(this).children("ul").toggle();

    // });

    $("body").on("click",function(){

        alert(event.target.className);

        $(event.target).children(".oOul").toggle();

        //$(event.target).children().find(".oOul").toggle();

        //$(this).children().find("ul").toggle();//this具有向下捕获的现象

        $(event.target).css("font-size","22px");

    });

    // $("body").on("click",".oLi",function(){

    //     alert(event.target.className);

    //     //$(event.target).children(".oOul").toggle();

    //     $(this).children(".oOul").toggle();

    // });


});

</script>

</body>

</html>


代码只要把jquery改为你本地的文件,可直接运行,比较干巴,将就一下哈。代码里介绍了几个事件注册和绑定的编写方法,各有优缺点,就不赘述了。主要想说的就是未注释的那段,文字比较苍白,希望大家用的到的,可以实际操作一下。

返回web开发教程...