初探 DOM 事件流：冒泡与捕获，揭秘网页事件的传播机制
2024-01-05 04:10:20
在网页开发中，事件是用户与网页交互的重要组成部分。当用户在网页上执行操作时，例如点击按钮、移动鼠标、输入文本等，都会触发相应的事件。这些事件由浏览器捕获并传递给网页元素，从而触发相应的处理程序。
DOM 事件流就是事件在网页元素之间传播的机制。它包含两种主要传播方式：事件冒泡和事件捕获。
事件冒泡：层层传递，逐级触发
事件冒泡是一种最常见的事件传播方式。当一个事件发生时，它会从触发事件的目标元素开始，逐级向上传播到父元素、祖父元素，直至根元素（通常是<html>元素）。在这个过程中，每个元素都会有机会处理该事件。
例如，考虑这样一个 HTML 结构：
<html>
<body>
<div id="container">
<button id="button">点击我</button>
</div>
</body>
</html>
如果在<button>元素上触发点击事件，事件将首先由<button>元素处理。如果<button>元素没有为点击事件定义处理程序，那么事件会继续向上冒泡，依次传递给<div>元素和<body>元素，直至到达根元素<html>元素。
document.querySelector('#button').addEventListener('click', (event) => {
console.log('Button clicked');
});
document.querySelector('#container').addEventListener('click', (event) => {
console.log('Container clicked');
});
document.querySelector('body').addEventListener('click', (event) => {
console.log('Body clicked');
});
document.querySelector('html').addEventListener('click', (event) => {
console.log('HTML clicked');
});
运行这段代码，当点击<button>元素时，控制台将输出以下内容：
Button clicked
Container clicked
Body clicked
HTML clicked
这表明点击<button>元素触发的事件依次冒泡到<div>、<body>和<html>元素，并且每个元素都触发了相应的事件处理程序。
事件捕获：逆流而上，提前拦截
与事件冒泡相反，事件捕获是从根元素开始，逐级向下传递到子元素，直至目标元素。在这个过程中，每个元素都有机会在事件到达目标元素之前处理它。
document.querySelector('html').addEventListener('click', (event) => {
console.log('HTML clicked (capture)');
}, true);
document.querySelector('body').addEventListener('click', (event) => {
console.log('Body clicked (capture)');
}, true);
document.querySelector('#container').addEventListener('click', (event) => {
console.log('Container clicked (capture)');
}, true);
document.querySelector('#button').addEventListener('click', (event) => {
console.log('Button clicked (capture)');
}, true);
运行这段代码，当点击<button>元素时，控制台将输出以下内容：
HTML clicked (capture)
Body clicked (capture)
Container clicked (capture)
Button clicked (capture)
这表明点击<button>元素触发的事件首先被根元素<html>元素捕获，然后依次被<body>、<div>元素捕获，最后才到达目标元素<button>元素。并且每个元素都触发了相应的事件处理程序。
巧妙运用，掌控交互
事件冒泡和事件捕获是 DOM 事件流的两个基本机制，理解和掌握它们对网页开发非常重要。合理运用事件冒泡和事件捕获，可以实现更复杂、更灵活的网页交互效果。例如：
- 使用事件冒泡可以方便地为一组元素添加相同的事件处理程序，而无需为每个元素单独添加。
- 使用事件捕获可以提前拦截事件，防止事件冒泡到不需要处理的元素上，从而提高网页性能。
- 利用事件冒泡和事件捕获，可以实现事件代理，即为父元素添加事件处理程序，然后在处理程序中根据目标元素的不同采取不同的处理方式。
总之，DOM 事件流是网页事件传播的基础，掌握事件冒泡和事件捕获的机制，可以更好地理解和掌控网页交互行为，实现更复杂、更灵活的网页交互效果。
