tnblog
首页
视频
资源
登录

JavaScript中的事件委托

2208人阅读 2018/12/9 20:10 总访问:19948 评论: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等没有冒泡特性的是无法使用事件委托的。



评价

JavaScript阻止scroll事件多次执行的思路及实现

//测试代码 window.onscroll=function(){ alert("haha"); }鼠标滑动之后一直点击提示框才可以,我想要的是鼠...

JavaScript的事件分类

JavaScript的事件大致可以分为几类,了解这些事件分类将有助于理解和组织代码。1、依赖于设备的输入事件有些事件和特定输入...

JavaScript、TypeScript数组里的删除指定元素

删除数组中指定的元素,原理上是不能直接删除指定的元素 要是可以直接删除的话绝对又bug 但是可以灵活的应用。自定义函数删...

a href=与 a href=JavaScript:void(0) 的区别

#包含了一个位置信息默认的锚点是#top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页...

Blazor的JavaScript和c相互调用

1、c#调用JavaScript privateMarkupStringmarkup=newMarkupString(); privatestringdate=DateTime.Now.ToString(); priv...

Blazor的c调用JavaScript传参

1、新建类库ExampleMethed和BlazorMerhed privatestringname="张三"; privatestringresult=string.Empty; pri...
没有个性,不需要签名
排名
69
文章
7
粉丝
2
评论
4
kotlin学习之HelloWord
尘叶心繁 : typescript?
kotlin学习之HelloWord
剑轩 : 介绍一下Kotlin是什么撒
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
大本钟下送快递——上面摆,下面寄。