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


网站题目:jQuery事件注册和绑定及this与event.target的区别浅析
当前地址:http://csdahua.cn/article/iiiops.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流