事件触发机制
JavaScript事件分为3个阶段
- 捕获阶段
- 目标阶段
- 冒泡阶段
事件捕获
事件捕获阶段：事件到达目标元素前 拦截事件，意为 捕获事件。
事件捕获阶段：event.eventPhase的值为1。 当发现是目标元素时，eventPhase 的值变为2。
事件捕获：自上到下，由外到里，前往捕获，行程向下趋势
事件冒泡
事件冒泡阶段：事件到底目标元素后，向上传导，向祖先元素传导事件， 意为冒泡事件
事件冒泡阶段：event.eventPhase的值为3。
事件冒泡：由里到外，冒泡，向上延伸。
eventPhase事件值
可以通过事件目标对象的 eventPhase 属性来得知当前事件在什么阶段
eventPhase事件值
| 常量 | 值 | 描述 |
|---|---|---|
| Event.NONE | 0 | 这个时间，没有事件正在被处理 |
| Event.CAPTURING_PHASE | 1 | 捕获阶段，事件正在被目标元素的祖先对象处理。过程是：Window => Document => HtmlElement => 一直到目标元素的父元素。通过EventTarget.addEventListener()注册为捕获模式的Event listeners调用。即addEventListener第三个参数设为true。 |
| Event.AT_TARGET | 2 | 事件对象已经抵达目标元素 |
| Event.BUBBLING_PHASE | 3 | 事件对象逆向向上传播会目标元素的祖先元素。为这个阶段注册的Event listeners在这个过程中被触发 |
demo演示
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
line-height: 300px;
background: pink;
text-align: center;
}
</style>
</head>
<body>
<div>事件机制</div>
<script>
var htmlEle = document.querySelector('html')
var bodyEle = document.querySelector('body')
var divEle = document.querySelector('div')
console.log('e.eventPhase的值：0：没有事件在处理； 1：捕获阶段； 2： 目标阶段； 3： 冒泡阶段');
htmlEle.addEventListener('click',function (e) {
console.log(`❥e.eventPhase的值：${e.eventPhase}，处于【捕获阶段】，html被触发捕获点击事件`)
}, true)
bodyEle.addEventListener('click',function (e) {
console.log(`❥❥e.eventPhase的值：${e.eventPhase}，处于【捕获阶段】，body被触发捕获点击事件`)
}, true)
divEle.addEventListener('click',function (e) {
console.log(`❥❥❥e.eventPhase的值：${e.eventPhase}，处于【目标阶段】，div被触发点击事件`)
}, true)
bodyEle.addEventListener('click',function (e) {
console.log(`❥❥e.eventPhase的值：${e.eventPhase}，处于【冒泡阶段】，body被触发冒泡点击事件`)
}, false)
htmlEle.addEventListener('click',function (e) {
console.log(`❥e.eventPhase的值：${e.eventPhase}，处于【冒泡阶段】，html被触发冒泡点击事件`)
}, false)
</script>
</body>
</html>