前言
本文主要是阅读了w3c之DOM事件架构的一些总结与笔记😁
原文链接如下~
www.w3.org/TR/DOM-Leve…
事件分发
事件分发机制
触发一个事件后，事件对象被派发（dispatchTvent方法）到事件目标，在派发之前，需确定事件对象的传播途径，一旦确定了传播途径，事件对象就会经过一个或多个事件阶段，事件分为三个阶段：捕获阶段，目标阶段和冒泡阶段。如果不支持该阶段，或者事件对象的传播已停止，则将跳过改阶段。
传播途径：当前事件目标的有序列表，也就是说，从窗口到事件目标将事件依次传递，传播途径中的每个事件目标依次设置为currentTarget，传播途径最初由事件类型定义的一个或多个事件阶段组成，但可以中断，也称为事件目标链；
事件阶段：在事件的上下文中，一个阶段是沿着DOM树从节点到节点的逻辑遍历集合，从窗口到Document对象，根元素，再到事件目标（捕获阶段），到事件目标本身（目标阶段），并备份相同的链（冒泡阶段）；
捕获阶段：通过从窗口到目标的祖先传播事件对象；
目标阶段：事件到达目标对象，如果事件类型指示事件不会冒泡，则事件对象将在此阶段完成后停止；
冒泡阶段：通过以相反的顺序，从目标祖先到窗口的传播事件对象；
事件标志
- stop propagation flag
- stop immediate propagation flag
- canceled flag
- in passive listener flag
- composed flag
- initialized flag
- dispatch flag
Evevt事件
👉stop propagation
不再派发事件
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
event.stopPropagation()👉stop immediate propagation
阻止剩下的事件处理程序被执行
event.stopImmediatePropagation()stop propagation 停止后续节点的事件派发
stop immediate propagation 停止当前节点以及后续节点事件的派发
区别就是stop immediate propagatio不会执行完当前节点的其他事件
👉preventDefault
取消事件的默认动作。
event.preventDefault() EventTarget.addEventListener()
说明
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。 addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。
语法
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);type：表示监听事件类型的字符串
listener: 函数
options ：
capture：是否捕获阶段触发
once：是否调用一次
passive：是否不会触发preventDefault()
useCapture：是否是捕获阶段触发listener
