事件委托

概念

事件委托,将本来应该绑定到子元素的响应事件委托给父元素,让父元素担当事件监听的职务。

事件流

事件委托是基于DOM的事件流,我们看一下事件的三个阶段:
捕获阶段 --> 目标 --> 冒泡阶段


事件流

捕获阶段:从document传导到目标节点(上层到下层),称为捕获阶段
目标阶段:在目标节点上触发
冒泡阶段:目标节点传导到document上层(下层到上层), 称为冒泡阶段。事件代理即是利用冒泡机制把所需要响应事件绑定到上层元素。

优点

利用事件冒泡,只指定一个事件处理程序,管理某一类型的所有事件

  • 可以大量节省内存占用,减少事件注册,如ul上代理所有的li的click事件
  • 当新增子元素时无需再次对其绑定事件,对于动态内容尤为合适
缺点
  • 若层级过多,冒泡过程中,可能会被某层阻止掉
  • 事件委托基于冒泡,对于不冒泡事件不支持
  • 理论上委托会导致浏览器频繁调用处理函数,虽然可能不需要处理。所以建议就近委托,如在ul上代理li事件,而不是在document上代理li
  • 使用“事件委托”时,并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时,越靠近顶层,事件的”事件传播链”越长,也就越耗时。如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.背景介绍 1.1什么是事件委托? 事件委托还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委...
    我叫于搞吧阅读 1,678评论 4 9
  • 作者:codeXiu 来源:掘金 事件流 事件流一共由三个阶段分别是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 ...
    强哥科技兴阅读 531评论 0 1
  • 大家好,我是IT修真院成都分院第07期学员,一枚正直善良的web程序员。 一、小课堂简述JS中的事件委托 1.背景...
    120De丶L阅读 345评论 0 0
  • 之前的文章里面有胸型和罩杯的分类等相关知识,今天我们来一个小课堂,更系统的了解一下内衣的相关知识。 肩带位:宽肩带...
    宛恩阅读 793评论 0 0
  • 写在前面的话: 班长的话:游陆莲姐姐把14班77位战友的文章都一一打开、点赞、点评。这种精神一直感动着我,谢谢陆莲...
    一缕阳光v阅读 458评论 0 6