JavaScript：事件：冒泡和捕获机制_利用事件冒泡或捕获,绑定事件父元素触发子元素点击-CSDN博客

本文详细介绍了JavaScript中的事件冒泡和捕获机制，包括它们的工作原理、应用场景以及如何通过addEventListener()方法控制事件处理程序在冒泡或捕获阶段响应。通过实例展示了如何利用event.target和event.currentTarget来确定用户点击的DOM元素，并探讨了stopPropagation()方法在防止事件传播中的作用。同时，文章提供了一系列的实践项目链接供读者深入学习。

摘要由CSDN通过智能技术生成

一般的事件处理不需要考虑这种情况。但是，这不仅是一个常见面试题，而且有其实际使用场景。

演示准备
有父子两个元素

源栈欢迎您

为了便于演示，加上一点CSS效果：

都注册了事件
var father = document.getElementById(‘propagate’),
child = father.children[0];
father.addEventListener(‘click’, function (event) {
console.log(‘event handler on father’);
});
child.addEventListener(‘click’, function () {
console.log(‘event handler on child’);
});
用户点击在子元素上
@想一想@：

这是不是也同时点在了父元素上？
所以，是不是一次事件就会调用两个handler？
那么，先触发的是子元素，还是父元素呢？
演示：略

冒泡和捕获
浏览器大战（复习）的年代，不同的浏览器使用了不同的机制来处理这种场景

冒泡（bubble）：事件从内向外传递，先触发子元素事件，再触发父元素的
捕获（capture）：事件从外向内传递，先触发父元素事件，再触发子元素的
现代浏览器都按W3C标准进行了统一。

当事件行为发生时，有两个“传播”阶段：首先由外向内“捕获”，然后再从内向外“冒泡”，如下图所示。

addEventListener()控制
那为什么上述演示的结果感觉是只有“冒泡”呢？

因为我们在绑定事件时（默认）指明了：该事件处理程序只适用/响应于冒泡阶段。

addEventListener()还有第三个参数useCapture，当其为

false：事件绑定在冒泡阶段（默认）
true：事件绑定在捕获阶段

演示：

father.addEventListener(‘click’, function (event) {
console.log(‘event handler on father’);
}, true);
child.addEventListener(‘click’, function () {
console.log(‘event handler on child’);
}, true);以及：父true子false，父false子true

理解：上述（由浏览器控制的）①②③④四个阶段始终是存在的，我们能控制的是：事件处理程序（handler）在哪一个阶段（phase）予以响应。

两个Target
现在我们来看一个真实的适用场景：给一个父元素里面的所有子元素绑定click事件。

<div id="propagate">
    <p>
        源栈欢迎您
    </p>
    <p>
        大神小班
    </p>
    <p>
        灵活学制
    </p>
</div>

要求显示用户所点击DOM元素（如何确定？能不能用this？）的文本。

实际上，这里面可以使用的有三个对象：

event.currentTarget（等同于this）：JavaScript代码中绑定事件的DOM元素
event.target：(用户)点击的DOM元素

father.addEventListener(‘click’, function (event) {
console.log(‘this === event.target:’ + (this === event.target));
console.log(‘event.target:’ + event.target.innerHTML); //符合题意需求
console.log(‘this === event.currentTarget:’ + (this === event.currentTarget));
console.log(‘event.currentTarget:’ + event.currentTarget.innerHTML);
});

@试一试@：当在父子元素上都绑定了事件之后，又各自使用冒泡/捕获，会是一种什么情形？

stopPropagation()
可以想象，事件冒泡/捕获机制极有可能会带来胡乱，所以有时候我们需要：阻止事件（行为）继续向上传递，这就需要调用：

event.stopPropagation();

注意：propagation包含冒泡和捕获

演示：采用冒泡/捕获，在父子元素事件handler中添加stopPropagation()

常见面试题

问：stopPropagation()和preventDefault()的区别？

联系：都是event方法，都能阻止事件发生
区别：
preventDefault()阻止的DOM元素默认的（不是我们JavaScript开发人员绑定的）事件，如提交按钮的提交，超链接的跳转……
stopPropagation()阻止的不是事件本身，是事件的传播，通过阻止事件传播阻止JavaScript开发人员的绑定事件