-
事件传播 [propagation] 三阶段
- 捕获阶段，由上层window对象传入底层目标节点的过程
- 目标阶段，在目标节点触发
- 冒泡阶段，由目标节点传回window对象
-
绑定监听函数的三种方式
-
html 标签中 on-属性，只会在冒泡阶段触发
- html与js分离
-
元素节点对象 node.onXxx，只会在冒泡阶段触发
- 同一个事件只能定义一个监听函数，后定义会覆盖之前的定义
-
addEventListener
- 同一个事件可以添加多个监听函数
- 能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数
- 应用范围广泛，整个 JavaScript 统一的监听函数接口
-
-
EventTarget 接口，三个实例方法
-
addEventListener：绑定事件的监听函数
-
参数三，可选属性配置对象
- capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
- once：布尔值，表示监听函数是否只触发一次，然后就自动移除。
- passive：布尔值，表示监听函数会不会调用事件的preventDefault方法。
-
-
removeEventListener：移除事件的监听函数
-
dispatchEvent：触发事件
-
-
事件代理 [delegation]
- 把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件
- 好处：
- 只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个节点上定义监听函数。
- 而且以后再添加子节点，监听函数依然有效。
-
Event 对象
-
实例属性
- Event.bubbles，Event.eventPhase
- Event.cancelable，Event.cancelBubble，event.defaultPrevented
- Event.currentTarget，Event.target
- Event.type
- Event.timeStamp
- Event.isTrusted
- Event.detail
-
实例方法
- Event.preventDefault()
- Event.stopPropagation()
- Event.stopImmediatePropagation()
- Event.composedPath()
- 返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点
-
stopPropagation 与 stopImmediatePropagation
同：阻止事件的传播
异：对当前节点上的后续事件的处理方式不同
- 前者，不再往后续节点传播，当前节点上的后续事件还会执行
- 后者，不传播，当前节点后续事件也不会执行
target 与 currentTarget
Event.currentTarget 属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。
Event.target 属性返回原始触发事件的那个节点，即事件最初发生的节点。
事件传播过程中，不同节点的监听函数内部的 Event.target 与 Event.currentTarget 属性的值是不一样的，前者target总是不变的，后者currentTarget则是指向监听函数所在的那个节点对象。
preventDefault 与 cancelable 属性
事件默认行为
- 点击链接后，浏览器默认会跳转到另一个页面，使用 preventDefault 后就不会跳转了；
- 按一下空格键，页面向下滚动一段距离，使用 preventDefault 后也不会滚动了；
该方法生效的前提是，事件对象的 cancelable 属性为 true，如果为false，调用该方法没有任何效果。
