JS 事件流和捕获冒泡机制

绪论

在前端开发中，事件处理是一个非常重要的概念。它允许我们响应用户与网页的互动，从而实现各种各样的功能。在JavaScript中，事件流是处理事件的一种机制，它规定了事件是如何从源元素传播到其他元素的。

事件流

事件流分为捕获阶段和冒泡阶段。在捕获阶段，事件从源元素向外传播，直到到达文档根节点。在冒泡阶段，事件从源元素向内传播，直到到达捕获阶段的起始点。

捕获阶段

在捕获阶段，事件从源元素传播到文档根节点。在这个阶段，事件可以被父元素捕获并处理。这意味着父元素可以响应子元素触发的事件。

冒泡阶段

在冒泡阶段，事件从源元素传播到捕获阶段的起始点。在这个阶段，事件可以被子元素冒泡并处理。这意味着子元素可以响应父元素触发的事件。

事件处理程序

事件处理程序是用来处理事件的函数。它可以是一个普通的函数，也可以是一个匿名函数。事件处理程序可以绑定到HTML元素的事件属性上。当事件发生时，就会触发事件处理程序。

DOM0级事件

DOM0级事件是HTML中的传统事件处理方式。它使用on加上事件类型来绑定事件处理程序。例如，以下代码将一个单击事件处理程序绑定到myButton元素：

<button id="myButton" onclick="myFunction()">点击我</button>

DOM2级事件

DOM2级事件是W3C推荐的事件处理方式。它使用addEventListener方法来绑定事件处理程序。例如，以下代码将一个单击事件处理程序绑定到myButton元素：

document.getElementById("myButton").addEventListener("click", myFunction);

阻止事件冒泡和捕获

可以使用stopPropagation()和preventDefault()方法来阻止事件冒泡和捕获。stopPropagation()方法可以阻止事件向上传播到父元素，preventDefault()方法可以阻止事件的默认行为。

document.getElementById("myButton").addEventListener("click", function(event) {
  event.stopPropagation();
  event.preventDefault();
});

总结

事件流是处理事件的一种机制，它规定了事件是如何从源元素传播到其他元素的。事件流分为捕获阶段和冒泡阶段。捕获阶段从源元素向外传播，冒泡阶段从源元素向内传播。事件处理程序用来处理事件，它可以绑定到HTML元素的事件属性上。DOM0级事件使用on加上事件类型来绑定事件处理程序，DOM2级事件使用addEventListener方法来绑定事件处理程序。可以使用stopPropagation()和preventDefault()方法来阻止事件冒泡和捕获。