tnblog
首页
视频
资源
登录

JavaScript中的事件委托

1855人阅读 2018/12/9 20:10 总访问:17425 评论:0 收藏:0 手机
分类: JavaScript

什么是事件委托

    事件委托在JavaScript中是非常常见的,它主要用于对某个元素中的子元素的冒泡事件进行监听。JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

什么是冒泡(百度上抄的)

    当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。

事件委托的好处:

    事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能。

    使用事件委托,只有父元素与DOM存在交互,其他的操作都是在JS虚拟内存中完成的,这样就大大提高了性能。

代码实现

(1)原生JS 

    window.onload = function(){  

       var oUl = document.getElementById("xxxx");

       oUl.onclick = function(){

            /// 方法体

        }

    }

(2)jQuery 

    $("父级元素").on('click','子元素',function(){

     //方法体

    })


注意事项:focus,blur等没有冒泡特性的是无法使用事件委托的。



评价
没有个性,不需要签名
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术