JS:事件委托 / 事件代理

205 阅读1分钟

事件委托(别名: 事件代理):即父元素代理子元素,子元素委托父元素(用词相对论)

  • 概念: 通过将子项的监听事件绑定在父元素的监听事件中
  • 原理: 事件冒泡
  • 作用:
    • 节省内存
    • 便于为后续添加的子项赋予点击响应事件,即动态绑定事件
  • 通过ev.target获取被点击的DOM元素,也可以通过判断该ev.target元素指定对某一类标签如span标签的点击不响应
  • 使用示例

ediv className=father onC Lickaf(ev).png

DOM 事件处理机制 DOM事件处理机制包括三部分:

  1. 事件捕获 当某一dom元素被触发某事件(如click事件),顶层对象document会发出事件流沿DOM树流向目标元素节点,在抵达目标元素的过程中其余元素的监听事件在捕获阶段是不会被触发的。

  2. 目标事件处理 目标元素节点被捕获之后执行相应的监听函数。

  3. 事件冒泡 (事件流流向刚好与事件捕获阶段相反) 触发目标元素节点之后,事件流从目标元素节点开始沿DOM树向顶层元素document进军,沿途触发相应的dom元素监听事件

由DOM的事件处理机制衍生的专有名词:事件委托/事件代理,其原理即事件冒泡