栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JavaScript事件委托原理与用法实例分析

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JavaScript事件委托原理与用法实例分析

本文实例分析了Javascript事件委托原理与用法。分享给大家供大家参考,具体如下:

在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题。

1. js中的事件流

在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获。

① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上触发上级节点的同类事件。

② .捕获:和冒泡类似,只不过事件的顺序相反。即是从上级节点传递到下级节点

2. 事件委托原理

事件委托就是基于js的事件流产生的,事件委托是利用事件冒泡,将事件加在父元素或者祖先元素上,触发该事件。


  
    
    
    
  



上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡,将事件加载父元素上,通过event参数来区别按钮的不同

3. 总结

通过对上面事件委托代码的观察,我们可以很容易得出事件委托的好处:

① .减少页面绑定事件数量,由于页面事件绑定数量越多,页面执行性能越差,所以事件委托可以提高页面的性能

② .事件委托可以灵活的处理子节点动态变化的场景,无论子节点增加还是减少,事件都无需重新绑定

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event

更多关于Javascript相关内容感兴趣的读者可查看本站专题:《Javascript事件相关操作与技巧大全》、《Javascript页面元素操作技巧总结》、《Javascript操作DOM技巧总结》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/80730.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号