js Event 事件对象 冒泡与捕获机制

MDN Event

Event 事件对象

鼠标 / 键盘属性

属性	描述
altKey	“ALT” 是否被按下
button	哪个鼠标按钮被点击
clientX	鼠标指针的相对容器水平坐标
clientY	鼠标指针的相对容器垂直坐标
ctrlKey	“CTRL” 键是否被按下
metaKey	“meta” 键是否被按下
relatedTarget	返回与事件的目标节点相关的节点 返回离开的父节点
screenX	鼠标指针的相对屏幕水平坐标
screenY	鼠标指针的相对屏幕垂直坐标
shiftKey	“SHIFT” 键是否被按下

要区分 target 与 currentTarget

实例属性

target
currentTarget
type

bubbles 该事件是否会在 DOM 中冒泡
defaultPrevented 表示 event.preventDefault() 方法是否取消了事件的默认行为

实例方法

event.preventDefault() 取消事件的默认行为
如按键、点击、元素的默认处理

event.stopPropagation() 阻止 捕获 和 冒泡 阶段中当前事件的进一步传播。
event.stopImmediatePropagation 阻止相同事件的其他事件监听器的执行

监听事件

事件监听器 = 事件处理器

EventTarget.addEventListener(事件名, 处理函数, 是否捕获模式)
// on事件 = xxx

EventTarget.removeEventListener(事件名, 处理函数)

事件派发

脚本触发事件

 EventTarget.dispatchEvent(事件名)

此事件的 taget 就是 EventTarget

冒泡与捕获

嵌套的元素事件处理函数可能会依次被触发，触发的顺序取决于 事件冒泡 和 事件捕获 在每一个元素上的设置情况。

嵌套元素 同时触发相同事件 ，事件执行的逻辑
有 冒泡与捕获 两种机制

• 冒泡 自 target 逐级向上传递
• 捕获 自 html 逐级向下 传递到 target

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。
但有时候并不希望事件冒泡（事件影响到上级） 可使用 stopPropagation() / stopImmediatePropagation()

事件委托