博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于事件委托的整理 ,另附bind,live,delegate,on区别
阅读量:6910 次
发布时间:2019-06-27

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

随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素添加事件反而添加到父元素的身上,现在的你可能会说博主有病,放屁脱裤子多此一举,那么博主告诉你博主放屁是不脱裤子的,下面说下什么时候使用事件委,(1)考虑一个ul,在li的数量非常少的时候,为每一个li添加事件当然不会存在太多性能方面的问题,但是当列表非常的长for循环太浪费内存,长到上百上千甚至上万的时候,为每个li添加事件就会对页面性能产生很大的影响。(习惯用ul了,其他元素嵌套关系自行脑补)(2)给一个ul里面的几个li添加了事件但是如果动态又生成了li则刚生成的li不具备事件这时就需要用到委托。

使用委托的优点:原本需要给多个元素添加事件的现在只需要给他们的父元素添加事件,提高性能,提高可读性。
那么现在是不是有点了解了呢?废话不多说直接上图,高清无码的哦、
点击每一个li都会触发事件alert出1。
HTML:
Jq代码不用委托:

Jq代码事件委托:
li就是子元素,jq委托的格式就是这样记住就行,当然on可以用bind,live,delegate.然而为什么小七没用呢自然是有原因的。
jQuery 1.3之前使用.bind()实现委托给他已经存在的子元素绑定事件,但不能给未来新增的元素绑定事件
为了突破单一.bind()方法的局限性jQuery 1.3使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行;
后来,为解决“事件传播链”过长的问题, jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
根据jQuery 1.7 Beta 1的发版说明,jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on(),所以不用纠结用刀还是用枪了以后直接用迫击炮(on()方法)
提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。

转载于:https://www.cnblogs.com/MagicZhao123/p/5980957.html

你可能感兴趣的文章
执行ssh-add时出现Could not open a connection to your authentication agent
查看>>
Ajax.BeginForm()实现ajax无刷新提交
查看>>
GROOVY简单语法实习
查看>>
刷新神经网络新深度:ImageNet计算机视觉挑战赛微软中国研究员夺冠
查看>>
27.OGNL与ValueStack(VS)-获取Stack Context中的信息
查看>>
MySQL数据库的事务管理
查看>>
BZOJ4631 : 踩气球
查看>>
离婚后感言
查看>>
怎么使用阿里云直播服务应用到现在主流直播平台中
查看>>
Ubuntu 安装搜狗拼音及fcitx
查看>>
JS中级 - 03:文档宽高及窗口事件(选)
查看>>
JavaScript类型转换
查看>>
路由器断网如何配置上网
查看>>
Vim保存只读模式下的修改
查看>>
转】Eclipse在线安装SVN
查看>>
Configuration
查看>>
DirectShowNet 使用摄像头录像+录音
查看>>
Oracle、SQL Server、MySQL数据类型对比
查看>>
php开n次方
查看>>
eclipse自动补全的设置
查看>>