文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript之事件委托的示例分析

2024-04-02 19:55

关注

小编给大家分享一下JavaScript之事件委托的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。

使用事件委托的优点

1、操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作

dom结构如下:

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

当li被点击时,打印该li的值。

在我们还没有学事件委托的时候我们会遍历所有li并给它们添加一个click事件,比如这样:

var aLi = document.getElementsByTagName('li');

for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener('click', function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

学了事件委托之后js原生代码如下:

var oUl = document.getElementById('oUl');

oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

jQuery代码如下:

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

相比之下,事件委托只需要获取父元素并且不需要遍历li,效率提高了不少。

2、将事件委托给父元素后,动态创建(删除)的子元素不用重新绑定(解绑)事件,实现了元素与事件的同步更新

在以往的js事件监听中,用js动态创建的子元素是没有事件的,必须重新为它们绑定事件,但是用事件委托就不用这么麻烦了,不需要重新绑定事件依旧可以实现事件监听。

当然事件绑定也是有弊端的,因为它依赖于事件冒泡,如果不支持冒泡那么就不能实现事件绑定了,不过我认为这种几率还是不高的。还有就是会发生事件误判,比如页面中的button1和button2的作用是点击时弹出值,而button3的作用是点击是页面变色,这三个button的同一个事件实现功能不同,当你将click事件委托给它们共同的父元素那么就会出现事件误判。

所以我认为事件委托是发生在一个子集合的事件功能相同的情况下,如果不相同则不要使用事件委托,以免弄巧成拙。

在实际开发中,掌握事件绑定对于代码的规范性以及效率会有一定提高,总的来说利大于弊。

以上是“JavaScript之事件委托的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯