阅读量:0
在 JavaScript 中，事件冒泡和捕获是事件传播的两种机制。当一个事件（如点击、按键等）发生在某个元素上时，浏览器会按照事件冒泡或捕获的顺序执行一系列的事件处理函数。了解这两种机制及其运用可以帮助我们更好地控制和处理事件。
事件冒泡（Event Bubbling）
事件冒泡是指事件从触发元素开始，逐级向上传播到最外层的根元素。在这个过程中，每一层元素都可以监听该事件，并执行相应的事件处理函数。事件冒泡的优点是可以方便地处理跨组件的事件，但缺点是可能导致不必要的处理函数执行。
运用事件冒泡的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Bubbling Example</title> <style> .outer { width: 200px; height: 200px; background-color: red; } .inner { width: 100px; height: 100px; background-color: blue; } </style> <script> document.querySelector('.outer').addEventListener('click', function() { alert('Outer element clicked'); }); document.querySelector('.inner').addEventListener('click', function(event) { alert('Inner element clicked'); }); </script> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html> 在这个示例中，当点击内部元素时，会先触发内部元素的点击事件处理函数，然后触发外部元素的点击事件处理函数。
事件捕获（Event Capturing）
事件捕获是指事件从最外层的根元素开始，逐级向下传播到触发元素的父元素。在这个过程中，每一层元素都可以监听该事件，并执行相应的事件处理函数。事件捕获的优点是可以提前处理事件，但缺点是可能导致不必要的事件处理函数执行。
运用事件捕获的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Capturing Example</title> <style> .outer { width: 200px; height: 200px; background-color: red; } .inner { width: 100px; height: 100px; background-color: blue; } </style> <script> document.querySelector('.outer').addEventListener('click', function() { alert('Outer element clicked'); }, true); // 使用事件捕获 document.querySelector('.inner').addEventListener('click', function(event) { alert('Inner element clicked'); }); </script> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html> 在这个示例中，当点击内部元素时，会先触发外部元素的点击事件处理函数，然后触发内部元素的点击事件处理函数。
总结
事件冒泡和事件捕获都可以用于处理跨组件的事件，但它们的执行顺序不同。事件冒泡从触发元素向上传播，而事件捕获从根元素向下传播。在实际应用中，可以根据需要选择使用事件冒泡或事件捕获。
