JS 事件

在 JavaScript 中，事件是指可以被 JavaScript 侦听和响应的动作或发生的情况。这些事件可以由用户触发（如点击按钮），也可以由浏览器本身触发（如页面加载完成）。通过监听这些事件，开发者可以使网页具有交互性。以下是关于 JavaScript 事件的基本介绍：

事件类型

JavaScript 支持多种类型的事件，以下是一些常见的例子：

• 鼠标事件：例如click（单击）、dblclick（双击）、mouseover（鼠标悬停）、mouseout（鼠标移出）。
• 键盘事件：例如keydown（按键按下）、keyup（按键释放）、keypress（字符键按下）。
• 表单事件：例如submit（表单提交）、reset（表单重置）、input（输入框内容变化）、change（表单字段值改变）。
• 窗口事件：例如load（页面加载完成）、resize（窗口大小调整）、scroll（滚动条滚动）。
• 触摸事件：例如touchstart、touchmove、touchend，主要用于移动设备。

事件监听

为了对特定的事件作出反应，你需要设置事件监听器。有几种方法可以做到这一点：

1. HTML 属性：直接在 HTML 标签中使用事件处理属性。

   <button onclick="alert('你点击了我！')">点击我</button>

2. DOM 元素的方法：使用 JavaScript 为特定元素添加事件监听器。

   document.getElementById("myButton").onclick = function () {
     alert("你点击了我！");
   };

3. addEventListener方法：这是推荐的方式，因为它允许为同一事件添加多个监听器，并且更灵活。

   document.getElementById("myButton").addEventListener("click", function () {
     alert("你点击了我！");
   });

事件对象

当事件发生时，浏览器会创建一个事件对象，该对象包含了有关事件的信息。你可以通过事件监听器中的参数来访问这个对象。例如：

document.getElementById("myButton").addEventListener("click", function (event) {
  console.log(event.type); // 输出 "click"
});

事件对象包含很多有用的信息，比如事件的类型、触发事件的元素以及鼠标指针的位置等。

事件委托

对于动态生成的元素，直接为其绑定事件可能不起作用。此时，可以利用事件冒泡机制，将事件监听器附加到父级元素上，然后根据事件目标判断是否执行相应的操作，这种方法称为事件委托。

事件传播机制

在 JavaScript 中，事件传播机制指的是当一个事件发生时，它如何在 DOM 树中传播。这个机制主要涉及三个概念：事件捕获、目标阶段和事件冒泡。理解这些概念有助于更精确地控制事件的处理方式，避免不必要的行为或创建复杂的交互逻辑。

1. 事件捕获（Capture Phase）

当某个元素触发事件时，事件首先从最外层的祖先元素开始向下传播，直到到达目标元素。在这个过程中，如果祖先元素有设置为捕获阶段的事件监听器，那么这些监听器就会被依次触发。这被称为事件捕获阶段。

document.getElementById("ancestor").addEventListener(
  "click",
  function () {
    console.log("捕获阶段：祖先元素");
  },
  true
); // 第三个参数设置为true表示在捕获阶段触发

2. 目标阶段（Target Phase）

一旦事件传播到了触发该事件的元素（即目标元素），事件就进入了目标阶段。此时，仅在目标元素上注册的事件处理器会被执行，不论它们是在捕获阶段还是冒泡阶段注册的。

document.getElementById("target").addEventListener("click", function () {
  console.log("目标阶段：目标元素");
});

3. 事件冒泡（Bubbling Phase）

默认情况下，事件会从目标元素开始向上逐级传播回最外层的祖先元素，这一过程称为事件冒泡。这意味着，如果父元素有注册了事件监听器，即使它们不是直接触发事件的元素，也会在其子元素的事件发生后得到通知并执行相应的回调函数。

document.getElementById("ancestor").addEventListener("click", function () {
  console.log("冒泡阶段：祖先元素");
}); // 默认或第三个参数false表示在冒泡阶段触发

阻止事件传播

有时，你可能希望阻止事件继续传播到其他元素，可以通过调用事件对象上的stopPropagation()方法来实现这一点：

document.getElementById("target").addEventListener("click", function (event) {
  event.stopPropagation();
  console.log("事件传播已停止");
});

此外，event.stopImmediatePropagation()不仅可以阻止事件进一步传播，还可以阻止同一元素上剩余的事件监听器被执行。

使用场景

• 事件委托：利用事件冒泡特性，可以在父元素上添加事件监听器来处理子元素的事件。这对于动态添加的子元素特别有用。
• 性能优化：通过在较高级别的元素上监听事件而不是每个单独的子元素，可以减少内存消耗和提高性能。