DOM事件委托

什么是事件委托

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托。
通俗点讲就是委托一个元素帮我监听我本该监听的元素。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的。事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。

事件委托的实现

在这之前先来看两个场景

  • 场景一
    问:要给100个按钮添加点击事件,应该怎么做。
    答:监听这100个按钮的祖先,等冒泡的时候判断target是不是这100个按钮当中的一个
    常规思路是遍历这100个按钮,每个都监听,这样的话就添加了100个监听器,会导致占用过多的内存的问题。
    代码示例
  • 场景二
    问:你要监听目前不存在的元素的点击事件,咋办?
    答:监听祖先,等点击的时候看看是不是我想要监听的元素即可
    代码示例

优点

  • 减少监听数量,整个页面的内存占用减少,提高性能
  • 可以监听动态生成的元素比如场景二

封装事件委托

要求
写出这样一个函数 on('click', '#div1', 'button', fn)
当用户点击 #tdiv1 里的 button 元素时,调用 fn 函数
要求用到事件委托
方法一这个答案是错的,但是在面试时是可以用的
方法一:判断 target 是否匹配 'button'
代码示例

方法二
递归判断 target / target的爸爸 / target的爷爷

代码示例

推荐阅读更多精彩内容

  • 点击事件 第一部分.概念 给3个div分别添加事件监听fnYe/fnBa/fnEr提问一:点击了谁?点击文字,算不...
    珍惜时间小李阅读 83评论 0 0
  • 捕获与冒泡 从外向内找监听函数,叫事件捕获从内向外找监听函数,叫事件冒泡 W3C事件模型 事件绑定API:addE...
    是周大侠啊阅读 72评论 0 1
  • Get Started DOM事件○ 标准○ 术语○ addEventListener○ 取消冒泡○ 自定义事件 ...
    茜Akane阅读 215评论 0 0
  • 事件代理又叫事件委托,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可...
    8d2855a6c5d0阅读 652评论 0 1
  • 事件委托是什么? 事件委托就是利用冒泡机制,将事件添加在目标元素的父元素或祖辈元素上,触发执行效果。也就是就是监听...
    Prayx阅读 109评论 0 0
  • DOM的事件委托(Event delegation)是通过事件 ”冒泡“ (event propagation) ...
    moyufed阅读 940评论 0 1
  • 什么是事件委托? 事件委托就是利用冒泡机制,将事件添加在目标元素的父元素或祖辈元素上,触发执行效果。也就是就是监听...
    Yandhi233阅读 85评论 0 0
  • 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。事件委托:不监听元素 C 自身,而...
    RickyWu585阅读 197评论 0 0
  • 什么是事件委托? 对"事件处理程序过多"问题的解决方案,就是需要触发子事件时,只用给某父元素指定一个事件处理程序,...
    抽疯的稻草绳阅读 200评论 0 2
  • 什么是事件委托? 对"事件处理程序过多"问题的解决方案,就是需要触发子事件时,只用给某父元素指定一个事件处理程序,...
    前端龙跃空阅读 452评论 0 0
  • 事件委托:由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处...
    月野馨阅读 84评论 0 0
  • 事件代理又叫事件委托,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可...
    Sharpe阅读 60评论 0 0
  • 1.什么叫事件 通俗理解,事件是用户或者浏览器自己执行的某种动作,是文档或者浏览器发生的一些交互瞬间,比如点击(c...
    彩虹雨落下阅读 160评论 0 0
  • 1.1. 事件高级 1.1.1. 注册事件(2种方式) 1.1.2 事件监听 addEventListener()...
    蔚完待旭阅读 285评论 0 2
  • 1 捕获和冒泡 2002年,W3C发布标准 文档名为DOM Level 2 Events Specificatio...
    卢卢2020阅读 160评论 0 1
  • 《闭上眼睛才能看清楚自己》这本书是香海禅寺主持贤宗法师的人生体悟,修行心得及讲学录,此书从六个章节讲述了禅修是什么...
    宜均阅读 8,598评论 1 25
  • 前言 Google Play应用市场对于应用的targetSdkVersion有了更为严格的要求。从 2018 年...
    申国骏阅读 59,157评论 14 98
  • 本文转载自微信公众号“电子搬砖师”,原文链接 这篇文章会以特别形象通俗的方式讲讲什么是PID。 很多人看到网上写的...
    这个飞宏不太冷阅读 5,785评论 2 15
  • 反正对于那些不在乎我的人,误会我的人。我再怎么努力,他们的看法也不会有所改变。
    Leeanran阅读 2,725评论 1 5
  • 《来,我们说说孤独》 1·他们都在写孤独 一个诗人 如果 不说说 内心的孤独 不将孤独 写进诗里 是不是很掉价呢 ...
    听太阳升起阅读 2,837评论 0 6