JavaScript 事件冒泡与捕获啥原理

在 JavaScript 中，事件冒泡和捕获是两种事件传播的机制。它们的主要原理如下：

事件流

事件流描述了从页面接收事件的顺序。在 DOM（文档对象模型）中，事件流分为两种模型：冒泡型（Bubble）和捕获型（Capture）。

冒泡型（Bubble）

冒泡型事件是从最内部的元素开始，逐级向外传递事件，直到传递至根节点。在冒泡过程中，事件处理程序会按照它们在页面上的层级顺序被触发。这种机制允许我们在全局范围内监听某个元素的事件，而不需要将事件监听器绑定到特定元素上。

冒泡型事件的典型应用场景是在用户点击按钮时，同时触发按钮的父容器或更高级别的元素的事件处理程序。

捕获型（Capture）

捕获型事件是从根节点开始，逐级向内传递事件，直到到达触发事件的元素。与冒泡型事件相反，捕获型事件处理程序在事件到达目标元素之前被触发。这种机制允许我们在事件到达目标元素之前就进行干预和处理。

捕获型事件的典型应用场景是在用户点击按钮时，提前在某个祖先元素上监听事件，以便在该事件到达按钮之前执行某些操作。

事件对象

在 JavaScript 中，使用事件对象（Event Object）来表示事件的相关信息。事件对象包含了诸如事件类型（type）、目标元素（target）、当前元素（currentTarget）等属性和方法。通过事件对象，我们可以获取到事件的详细信息，并根据需要执行相应的操作。

总结

事件冒泡和捕获是 JavaScript 中两种事件传播的机制。冒泡型事件从内向外传递，允许全局监听；捕获型事件从外向内传递，允许在事件到达目标元素之前进行干预。事件对象提供了丰富的属性和方法，帮助我们更好地处理事件。