JS基础知识–事件，事件流，事件模型

JavaScript 中的事件模型是一种用于处理用户交互和其他类型事件的机制。它允许开发人员对特定事件做出响应，并执行相应的代码。

事件

JavaScript 的事件模型基于事件驱动编程的概念，它包括以下主要组成部分：

事件目标（Event Target） ：事件目标是触发事件的对象，它可以是文档、窗口、HTML 元素或其他 JavaScript 对象。每个事件目标都可以监听和触发事件。
事件监听器（Event Listener） ：事件监听器是一个函数，用于定义事件发生时要执行的代码。通过将事件监听器附加到事件目标上，可以告诉 JavaScript 在事件发生时调用特定的函数。
事件类型（Event Type） ：事件类型是一种特定的事件，例如点击事件（click）、键盘按下事件（keydown）、鼠标移动事件（mousemove）等。每个事件类型都有其特定的属性和行为。
事件处理程序（Event Handler） ：事件处理程序是一个函数，它被分配给特定事件类型的监听器。当事件发生时，事件处理程序会被调用，并执行相关的代码。
事件对象（Event Object） ：事件对象是一个包含有关事件的信息的对象。它提供了与事件相关的属性和方法，可以用于获取事件的详细信息，如事件目标、事件类型、鼠标位置等。

事件模型的基本流程如下：

JavaScript 提供了多种方式来操作事件模型，包括使用原生的 addEventListener 方法来添加事件监听器、使用内联事件处理程序、使用事件委托等。

由于 DOM 是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流的概念。

所谓事件流，Event Flow，是指描述事件在 DOM 树中传播和触发的顺序。当事件发生时，它会在 DOM 树的不同节点间传播，最终触发相应的事件处理程序。

事件流有两种主要的模型：

冒泡（Bubbling）：在冒泡模型中，事件首先在触发事件的元素上触发，然后沿着 DOM 树向上冒泡，依次触发父元素的相同事件。换句话说，事件开始时在最具体的元素上触发，然后逐步向上触发，直到到达最顶层的祖先元素。这是默认的事件流模型，也是最常用的模型。
捕获（Capturing）：在捕获模型中，事件从最顶层的祖先元素开始，沿着 DOM 树向下传播，直到达到触发事件的元素。然后，事件在触发元素上触发，最后不再继续传播。捕获模型在实际开发中较少使用，但可以使用 addEventListener 方法的第三个参数设置为 true 来启用捕获阶段。

事件流都会经历三个阶段：