标签：阶段 触发 捕获 冒泡 addEventListener 机制 eventPhase 事件
事件触发机制
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>
控制台
标签：阶段,触发,捕获,冒泡,addEventListener,机制,eventPhase,事件 来源： https://www.cnblogs.com/shine-lovely/p/14973204.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。