首页 / JAVASCRIPT / JS事件委托实例详解
JS事件委托实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS事件委托实例详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2322字,纯文字阅读大概需要4分钟。
内容图文
![JS事件委托实例详解](/upload/InfoBanner/zyjiaocheng/295/fcae5e2f2dac4709baf6e54e461899db.jpg)
首先呢,你一定写过这样的程序,有一个列表,当鼠标移入每个li,背景颜色变红,于是我们写出了这样的代 码:
(我给的代码一般都写的重点代码,html大家可以自行写哈。)
window.onload = oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); ( i =0;i < aLi.length;i++=
当然这样一看代码也没什么问题,通过循环给每个li加事件,但想一想如果我们有很多个li,是不是要加很多次事件,这样其实是非常耗性能的。那么我们会想,能不能只加一个事件就能实现呢。当然是能的,不然我就不会在这扯了。
那就是通过冒泡原理进行事件委托,我们可以把事件只加给父级oUL,这样不管移入哪个li,都会触发父级的移入事件,(对冒泡不太理解的,可以参考我的JS冒泡的文章),但这个时候也有个问题,因为我的需求是,让对应的li变颜色,不是让整个列表变,它怎么知道我鼠标移入的是哪个LI,这个时候万能的事件对象中的一个属性就要出场了,就是事件源 (不管事件绑定在那个元素中 都指的是实际触发事件的那个的目标),就是能获取到你当前鼠标所在的LI,
不过这个有兼容性问题, IE和标准下不同,标准指的就是比较新版本的那些浏览器了
IE:window.event.srcElement
标准:event.target
所以需要做下兼容,也很简单。
下面看下整体代码:
window.onload = function(){ var oUl = document.getElementById('ull'); var aLi = document.getElementsByTagName('li'); oUl.onmouseover = function(ev){ var event = ev||window.event; // 获取event对象 var target = ev.target || ev.srcElement; // 获取触发事件的目标对象 if(target.nodeName.toLowerCase() == 'li'){ //判断目标对象是不是li target.style.background = 'red'; } } 代码中加了一个标签名的判断,主要原因是如果不加判断,当你鼠标移入到父级oUL上面的时候,整个列表就会变红,这不是我们想要的结果,所以要判断一下。
target.nodeName 弹出的名字是大写的,所以需要转换大小写再比较。
整个需求这样就完成了,而且当列表很多的时候大大的提高了性能。
其实事件委托还有第二个优点:就是新添加的元素还会有之前的事件
假定我们又有一个需求,点击某个按钮,可以在列表中再创建一个li,这个时候一般方法,因为新创建的li没有加事件,所以是不具备移入变红的功能的,但是用事件委托的方法,新的li,同样有这个事件。原理也很容易相同,因为事件是加在父亲上面的,父亲在,事件在,大家可以自己测试一下。
相关推荐:
细说什么是js中的事件冒泡和事件捕获以及事件委托
事件捕获和冒泡以及事件委托对比分析
Javascript事件委托相关详解
以上就是JS事件委托实例详解的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的JS事件委托实例详解全部内容,希望文章能够帮你解决JS事件委托实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。