事件

1. Js 中有几种注册事件的方法，分别有什么区别，以一个点击事件为例，它的完整流程是怎么样的？

在JavaScript中，有多种注册事件的方法，包括：
- addEventListener：这是最常用的方法，可以在元素上添加多个事件监听器，支持事件冒泡和捕获阶段。
- element.onclick：这是传统的方法，将事件处理程序直接分配给onclick属性，但不支持多个事件监听器。
- element.addEventListener('click', handler)示例：

  ```javascript
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('按钮被点击了！');
  });
  ```

完整的点击事件流程包括：
1. 用户点击页面上的元素（触发点击事件）。
2. 浏览器捕获事件（如果使用捕获阶段）。
3. 事件从顶层元素（通常是document）冒泡至目标元素。
4. 目标元素上注册的点击事件处理程序被执行。
5. 事件继续冒泡至顶层元素，执行在途中注册的事件处理程序。
6. 事件处理完成后，可以选择取消冒泡（event.stopPropagation()）。

2. Input 中监听值的变化是在监听什么事件？

监听输入元素（如<input>或<textarea>）值的变化通常是通过监听input事件或change事件来完成的。这两个事件的行为略有不同：
- input事件：当用户在输入字段中输入、粘贴或删除文本时触发，即时反映用户输入的变化，适用于实时反馈。
- change事件：当用户在输入字段中进行更改并尝试提交表单时触发，通常在输入字段失去焦点时才触发，适用于整个输入完成后的处理。

3. 浏览器中监听事件函数 addEventListener 第三个参数有哪些值？它们的作用是什么？

addEventListener函数的第三个参数是一个布尔值或对象，用于指定事件处理程序的行为：
- 如果是布尔值 true，事件会在捕获阶段触发。
- 如果是布尔值 false 或省略不写，事件会在冒泡阶段触发。
- 如果是一个对象，可以使用以下属性：
- capture：布尔值，指定事件是否在捕获阶段触发。
- once：布尔值，指定事件是否只触发一次。
- passive：布尔值，如果为 true，则表示事件处理程序不会调用preventDefault()，可以提高性能。

4. 什么是事件冒泡和事件捕获？

事件冒泡和事件捕获是事件传播的两种阶段：
- 事件冒泡：事件从目标元素开始，沿DOM树向上传播，直到达到根元素（通常是document）。这是默认行为。
- 事件捕获：事件从根元素开始，沿DOM树向下传播，直到达到目标元素。

在使用addEventListener注册事件时，可以通过第三个参数来选择在冒泡阶段还是捕获阶段触发事件处理程序。

5. 什么是事件委托，e.currentTarget 和 e.target 有何区别？

事件委托是一种优化技巧，通过将事件处理程序附加到父元素而不是每个子元素来提高性能。父元素捕获事件并根据事件的e.target属性确定哪个子元素触发了事件。

- `e.currentTarget`：表示当前事件处理程序所附加到的元素，它不会改变，始终是相同的父元素。
- `e.target`：表示触发事件的实际目标元素，它可能是父元素的子元素。

通过事件委托，你可以在父元素上监听事件，然后根据e.target来判断哪个子元素触发了事件，从而减少了事件处理程序的数量，提高了性能。