JavaScript的事件流主要包括三个阶段:捕获阶段、目标阶段和冒泡阶段。当一个事件发生时,如点击一个按钮,这个事件会从最外层的祖先元素(通常是window
对象)开始向下传递,这是捕获阶段。当事件到达触发事件的目标元素时,进入目标阶段。然后,事件会从目标元素开始,向上冒泡到最外层的祖先元素,这是冒泡阶段。
下面是一个演示JavaScript事件流的简单实例:
html<!DOCTYPE html> <html> <head> <title>JavaScript 事件流示例</title> <style> #outer { width: 300px; height: 300px; background-color: lightblue; } #middle { width: 200px; height: 200px; background-color: lightgreen; margin: 50px; } #inner { width: 100px; height: 100px; background-color: lightyellow; margin: 50px; } </style> </head> <body> <div id="outer"> <div id="middle"> <div id="inner">点击我</div> </div> </div> <script> var outerDiv = document.getElementById('outer'); var middleDiv = document.getElementById('middle'); var innerDiv = document.getElementById('inner'); // 在捕获阶段添加事件监听器 document.addEventListener('click', function(event) { event.stopPropagation(); // 阻止事件冒泡 console.log('捕获阶段:document'); }, true); // 第三个参数为true表示在捕获阶段添加事件监听器 outerDiv.addEventListener('click', function(event) { console.log('捕获阶段:outerDiv'); }, true); middleDiv.addEventListener('click', function(event) { console.log('捕获阶段:middleDiv'); }, true); innerDiv.addEventListener('click', function(event) { console.log('目标阶段:innerDiv'); }); middleDiv.addEventListener('click', function(event) { console.log('冒泡阶段:middleDiv'); }); outerDiv.addEventListener('click', function(event) { console.log('冒泡阶段:outerDiv'); }); document.addEventListener('click', function(event) { console.log('冒泡阶段:document'); }); </script> </body> </html>
这个示例中,有三个嵌套的div
元素,分别命名为outerDiv
、middleDiv
和innerDiv
。我们在这些元素以及document
对象上添加了点击事件的监听器,并指定了事件是在捕获阶段还是冒泡阶段触发。当你点击"点击我"这个文本时,控制台将输出事件流的顺序。
注意,在document
对象的捕获阶段事件监听器中,我们调用了event.stopPropagation()
方法来阻止事件冒泡。因此,尽管我们在document
对象的冒泡阶段也添加了一个事件监听器,但它不会被触发。