JavaScript事件委托

370 阅读2分钟

事件委托

利用事件冒泡,指定一个事件处理程序,管理一系列的所有事件
事件委托利用DOM元素的事件冒泡,把子元素的相关事件委托(代理)给父元素监听处理。

什么是事件冒泡?

在JavaScript中,事件触发后会在子元素和父元素之间传播。

  • 事件捕获(从顶层到底层)
    元素事件触发后,会从window对象将事件传导到目标节点
  • 目标阶段
    在目标节点上触发
  • 事件冒泡(从底层到顶层)
    元素事件触发后,会从目标节点传导回window对象,事件委托就是利用的冒泡机制
  • 事件委托
    因为事件始终会冒泡到父元素,并且父元素会获取到所触发事件对应的子元素节点相关信息,以及event中的事件属性,因而只需要对目标节点的父元素进行事件委托,即可处理相应事件

事件委托的好处

  1. 可以提高JavaScript事件处理的性能
  2. 可以动态添加相关的DOM元素,子元素的变动不会重新修改事件绑定 例如:

image.png 对li元素进行绑定事件,必须循环对应li元素并绑定事件
image.png 通过事件委托只需要对ul父元素绑定事件,当触发事件时,会将对应的子元素相关事件冒泡到ul事件处理程序中,只需要判断对应事件中target是否是li子元素,再做对应逻辑处理即可。

结语

使用“事件委托”时,并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时,越靠近顶层,事件的”事件传播链”越长,也就越耗时。如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失。

感谢

谢谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎指正。

我是瑾江,如果觉得写得可以的话,请点个赞吧。

「点赞」+「在看」+「转发」 谢谢支持

往期好文

《Vue3+Ts+Element-PLus后台管理系统》

《GitHook 工具 —— husky(格式化代码)》

《浏览器线程-事件循环(Event Loop)》

《Node.js 大文件上传、断点续传》)