博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
对JS中事件委托的理解
阅读量:6293 次
发布时间:2019-06-22

本文共 955 字,大约阅读时间需要 3 分钟。

什么是事件委托:

事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件。(不理解冒泡的可以去百度下)

定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器,相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。

 

事件委托的好处:

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

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

 

什么时候用事件委托:

当子元素有很多,需要对子元素的时间进行监听的时候

 

案例:

(1)原生JS实现事件委托效果

事件委托测试

事件委托三部曲:

第一步:给父元素绑定事件
给元素ul添加绑定事件,通过addEventListener为点击事件click添加绑定

第二步:监听子元素的冒泡事件

这里默认是冒泡,点击子元素li会向上冒泡

第三步:找到是哪个子元素的事件

通过匿名回调函数的参数e用来接收事件对象,通过target获取触发事件的目标

(2)JQ实现事件委托

事件委托测试

 

转载于:https://www.cnblogs.com/zhanai/p/7843215.html

你可能感兴趣的文章
检验手机号码
查看>>
重叠(Overlapped)IO模型
查看>>
Git使用教程
查看>>
使用shell脚本自动监控后台进程,并能自动重启
查看>>
Flex&Bison手册
查看>>
solrCloud+tomcat+zookeeper集群配置
查看>>
/etc/fstab,/etc/mtab,和 /proc/mounts
查看>>
Apache kafka 简介
查看>>
socket通信Demo
查看>>
技术人员的焦虑
查看>>
js 判断整数
查看>>
mongodb $exists
查看>>
js实现页面跳转的几种方式
查看>>
sbt笔记一 hello-sbt
查看>>
常用链接
查看>>
pitfall override private method
查看>>
!important 和 * ----hack
查看>>
聊天界面图文混排
查看>>
控件的拖动
查看>>
svn eclipse unable to load default svn client的解决办法
查看>>