JS事件模型/事件代理/冒泡捕获

248 阅读1分钟

Js事件模型有哪些

image.png

什么是事件代理?哪些应用场景

事件代理(Event Delegation)也称之为事件委托。事件代理的原理是DOM元素的事件冒泡

一个事件触发后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。

  • 捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件;
  • 目标阶段:在目标节点上触发,称为“目标阶段”
  • 冒泡阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

image.png

事件冒泡和捕获

image.png

e.target 和 e.currentTarget 有什么区别?

冒泡 & 捕获

当你触发一个元素的事件的时候,该事件从该元素的祖先元素传递下去,此过程为捕获,而到达此元素之后,又会向其祖先元素传播上去,此过程为冒泡

image.png image.png

addEventListener

addEventListener是为元素绑定事件的方法,他接收三个参数:

  • 第一个参数:绑定的事件名

  • 第二个参数:执行的函数

  • 第三个参数:

    • false:默认,代表冒泡时绑定
    • true:代表捕获时绑定

target & currentTarget

image.png

image.png

区别

我们可以总结出:

  • e.target触发事件的元素
  • e.currentTarget绑定事件的元素