JavaScript-----事件委托
一.什么是事件委托
事件委托也被称为事件代理,在jQuery里称为事件委派
二.事件委托的原理:
1.事件委托就是利用函数的冒泡冒原理,把事件绑定在父元素上面,把所有本该子元素各自处理的事情交给父元素统一处理,达到性能优化的效果
2.不要给每个子节点设置事件监听器,而且事件监听器设置在其父节点上,然后利用冒泡原理设置每个子节点
三.事件委托的作用:
只操作了依次DOM,提高了程序的性能
可以大量节省内存占用,减少事件注册
四.事件委托的核心原理;
给父节点添加监听器,利用事件冒泡影响每一个节点
举个栗子:
比如一个宿舍的同学同时快递到了,一种方法就是他们一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一 一分发给每个宿舍同学;
在这里,取快递就是一个事件,每个同学指的是需要响应事件的 DOM 元素,而出去统一领取快递的宿舍长就是代理的元素,所以真正绑定事件的是这个元素,按照收件人分发快递的过程就是在事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。
举个栗子:
如果给每个li列表项都绑定一个函数,那对内存的消耗是非常大的,因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上,执行事件的时候再去匹配判断目标元素。
-
<ul>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
</ul>
-
</body>
-
<script>
-
-
//获取元素
-
var ul = document.querySelector("ul");
-
ul.addEventListener('click', function (e) {
-
alert('hhh')
-
})
栗子2:
-
<ul>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
<li>橘子红了</li>
-
</ul>
-
</body>
-
<script>
-
-
//获取元素
-
var ul = document.querySelector("ul");
-
ul.addEventListener('click', function (e) {
-
// alert('hhh')
-
// e.target 可以得到点击的对象
-
e.target.style.backgroundColor = 'pink'
-
})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhbcbai
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11