117笔记问答在 JavaScript 中，事件冒泡和捕获是事件传播的两种机制。要控制这两种机制，你可以使用以下方法：
-
使用
addEventListener方法的第三个参数：当使用
addEventListener方法为元素添加事件监听器时，可以传递一个可选的第三个参数。这个参数决定了事件触发时，监听器的执行顺序。取值如下：false（默认值）：事件触发时，监听器按照它们被添加的顺序执行，即事件冒泡阶段先执行捕获阶段的监听器，然后执行目标元素上的监听器，最后执行冒泡阶段的监听器。true：事件触发时，监听器按照它们被添加的逆序执行，即事件冒泡阶段先执行目标元素上的监听器，然后执行捕获阶段的监听器，最后执行冒泡阶段的监听器。
示例：
const button = document.querySelector('button'); const parent = button.parentElement; function bubbleHandler() { console.log('Bubble handler'); } function captureHandler() { console.log('Capture handler'); } parent.addEventListener('click', bubbleHandler, false); // 事件冒泡阶段执行 parent.addEventListener('click', captureHandler, true); // 事件捕获阶段执行 -
使用
Event对象的stopPropagation方法：当事件触发时，你可以使用
stopPropagation方法阻止事件继续传播。这样，事件就不会触发冒泡或捕获阶段的监听器。示例：
const button = document.querySelector('button'); const parent = button.parentElement; function bubbleHandler() { console.log('Bubble handler'); } function captureHandler() { console.log('Capture handler'); } parent.addEventListener('click', bubbleHandler); parent.addEventListener('click', captureHandler); button.addEventListener('click', (event) => { event.stopPropagation(); // 阻止事件冒泡 });
通过合理地设置第三个参数和调用 stopPropagation 方法，你可以根据需要控制事件冒泡和捕获的执行顺序。