事件委托原理

要了解事件委托你必须先了解事件传播

事件传播

事件传播是指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。事件传播分为三个阶段:

  1. 捕获阶段 —— 从window,document 和根元素开始,事件向下扩散至目标元素的祖先
  2. 目标阶段 —— 事件在用户单击的元素上触发
  3. 冒泡阶段——最后,事件冒泡通过目标元素的祖先,一直到根元素 document 和 window。

事件委托

事件委托是把事件侦听器附加到按钮的父级,并在单击按钮时捕获冒泡事件。
当用事件委托的时候,根本就不需要去遍历元素的子节点,整体只注册一次事件,并没有给每个子元素都注册个监听。这样可以大大的减少dom操作,这就是事件委托的意义。

总结

优点:
  1. 可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。
  2. 可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适
缺点:

事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概念 事件委托,通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。 事件流 事件流描述的是从页面中接收事件...
    __MYSTERY阅读 1,577评论 0 1
  • 为什么使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom...
    a180754bf396阅读 1,473评论 0 1
  • 事件委托是利用事件冒泡原理,让节点的父级代为执行事件。而不需要循环遍历元素的子节点,大大减少dom操作;缺点:1....
    清汤饺子阅读 1,713评论 0 1
  • 基本概念 事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常...
    dingFY阅读 214评论 0 0
  • 基本概念 事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常...
    程序猿TODO阅读 425评论 0 0