jQuery事件注册和绑定及this与event.target的区别浅析

最近小码哥，在研究学习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代码是检验事件是否能通的唯一标准。

代码如下：（希望新老码农光看勿喷，默默的哈~）

     

• item 1

         

           

  • sub item 1-a

           

  • sub item 1-b

         

       

     

• item 2

         

           

  • sub item 2-a

           

  • sub item 2-b

         

       

 

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