在 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
方法,你可以根据需要控制事件冒泡和捕获的执行顺序。