事件机制
事件触发三阶段
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在这个过程中被触发 |
阻止事件
- e.stopPropagation：事件只发生在目标元素上，使用e.stopPropagation 来阻止事件的进一步传播。
- e.stopPropagation 即可以阻止冒泡事件，也可以阻止捕获事件
- e.stopImmediatePropagation： 也可以阻止事件的进一步传播。但是同时会阻止该事件目标执行别的注册事件。
node.addEventListener(
'click',
event => {
event.stopImmediatePropagation()
console.log('冒泡')
},
false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
'click',
event => {
console.log('捕获 ')
},
true
)
事件代理
- 如果一个节点的子节点是动态生成的，那么注册在子节点上的事件，应该注册在父节点上
- 节省内存
- 不需要为子节点注销事件
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let ul = document.querySelector('#ul')
ul.addEventListener('click', (event) => {
console.log(event.target);
})
</script>
事件机制demo演示
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
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>
控制台
