在 JavaScript 中,事件冒泡和捕获是两种事件传播的机制。它们决定了事件从哪个元素开始触发,以及是否继续向下传播。默认情况下,事件处理程序首先在内部元素上执行(捕获阶段),然后在外部元素上执行(冒泡阶段)。
以下是如何实现事件冒泡和捕获的示例:
- 使用
addEventListener
方法设置事件监听器并指定useCapture
参数:
// 捕获阶段 element.addEventListener('click', function(event) { console.log('捕获阶段'); }, true); // 冒泡阶段 element.addEventListener('click', function(event) { console.log('冒泡阶段'); }, false);
- 使用
attachEvent
方法设置事件监听器(仅适用于 Internet Explorer 浏览器):
// 捕获阶段 element.attachEvent('onclick', function() { console.log('捕获阶段'); }); // 冒泡阶段 element.attachEvent('onclick', function() { console.log('冒泡阶段'); });
在这两个示例中,当用户点击元素时,控制台将首先输出 “捕获阶段”,然后输出 “冒泡阶段”。这表明事件首先在内部元素上执行捕获阶段,然后在外部元素上执行冒泡阶段。
注意:addEventListener
和 attachEvent
方法的参数有所不同。addEventListener
的第二个参数是一个布尔值,用于指定事件处理程序是在捕获阶段还是冒泡阶段执行。而 attachEvent
的第二个参数是一个字符串,仅当设置为 'true'
时,事件处理程序才会在捕获阶段执行。