JS事件笔记

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

在 JavaScript 中，有几种注册事件的方法，主要有以下几种：

1. 直接在 HTML 元素上绑定事件属性： 这是一种传统的方法，在 HTML 元素标签上使用事件属性，例如：<button onclick="handleClick()">Click me</button>。这种方法比较简单，但不太推荐，因为它将 HTML 和 JavaScript 代码耦合在一起。

2. 使用 DOM 对象的属性： 通过 JavaScript 获取 DOM 元素，并设置其事件属性，例如：document.getElementById('myButton').onclick = handleClick;。这种方法在功能上类似于第一种，但可以将 JavaScript 代码分离出来。

3. 使用 addEventListener 方法： 这是更现代和强大的方法，通过调用 DOM 元素的 addEventListener 方法来注册事件监听器，例如：document.getElementById('myButton').addEventListener('click', handleClick);。这种方法可以同时注册多个相同类型的事件，而且可以更容易地添加、移除或管理事件监听器。

以一个点击事件为例，使用 addEventListener 方法的完整流程如下：

1. 获取需要绑定事件的 DOM 元素，例如: 

   const button = document.getElementById('myButton');

2. 定义事件处理函数，例如：

   function handleClick(event) {
       // 在这里编写点击事件的处理逻辑
       console.log('Button clicked!', event);
   }
   

3. 使用 addEventListener 方法注册事件监听器：

   button.addEventListener('click', handleClick);

4. 当用户点击按钮时，浏览器会触发 click 事件，然后调用定义的事件处理函数 handleClick，可以在该函数中执行所需的操作。

总之，使用 addEventListener 方法可以更灵活地管理事件监听器，减少代码的耦合性，以及更好地维护和扩展代码

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

在输入元素（例如文本框、复选框、单选按钮等）中，监听其值的变化通常是通过监听 input 事件或 change 事件来实现的，具体取决于你的需求和使用情境。

1. input 事件： 当输入元素的值发生变化时，即时触发 input 事件。这意味着每次用户在输入框中输入、删除或修改内容时都会触发该事件。这对于实时反映用户输入的变化非常有用，例如实时搜索建议、字符计数等。

   inputElement.addEventListener('input', function(event) {
       // 处理输入值变化的逻辑
   });

2. change 事件： 当输入元素的值发生变化，并且用户焦点离开该元素（即元素失去焦点）时，触发 change 事件。这意味着用户完成输入并点击其他地方，或者按下 Enter 键时，才会触发该事件。适用于在用户完成输入后执行操作。

   inputElement.addEventListener('change', function(event) {
       // 处理输入值变化的逻辑
   });
   

   根据你的需求，你可以选择适合的事件来监听输入元素值的变化。如果需要实时监测每次用户输入变化，使用 input 事件；如果只关心用户完成输入并离开输入框时的变化，使用 change 事件。

浏览器中监听事件函数 addEventListeren 第三个参数有哪些值? 他们的作用是什么?

addEventListener 函数的第三个参数是一个布尔值或一个具有以下属性的对象：

1. 捕获阶段： 当设置为 true 时，在事件捕获阶段触发事件处理函数。捕获阶段是从文档的根节点开始，逐级向下到目标元素的过程。事件处理函数在祖先元素上被调用，然后再在目标元素上调用。设置为 false（默认值）时，在事件冒泡阶段触发事件处理函数。

2. 事件处理函数： 要绑定的事件处理函数，即在事件触发时执行的代码块。

3. 选项对象（可选）： 一个配置对象，可以包含以下属性：

   • capture：布尔值，表示是否在捕获阶段触发事件处理函数。与第一个参数效果相同，但这里可以更具体地指定。
   • once：布尔值，表示事件处理函数是否只执行一次，然后自动被解绑。
   • passive：布尔值，表示事件处理函数是否是“被动”的，即不会调用 preventDefault 来阻止默认行为。这可以提高滚动性能。
   • signal：一个 AbortSignal 对象，用于终止事件的监听。

例如，以下是使用 addEventListener 函数的示例：

element.addEventListener('click', handleClick, {
    capture: true,
    once: false,
    passive: false,
    signal: abortController.signal
});

这里，handleClick 是事件处理函数，选项对象包含捕获阶段为 true，事件处理函数只执行一次（once），不是被动事件（passive 为 false），并且使用了一个 AbortSignal 对象来终止事件监听（signal）。

什么是事件冒泡和事件捕获?

事件冒泡和事件捕获是浏览器中处理事件传播（即事件从目标元素向上或向下传播）的两种不同机制。

1. 事件冒泡（Event Bubbling）： 在事件冒泡机制中，事件首先在触发事件的元素上触发，然后逐级向上传播到更高层次的祖先元素，直到达到文档的根节点。这意味着如果你在子元素上绑定了一个事件处理函数，点击子元素时，该事件处理函数会在子元素、父元素、祖先元素等依次触发。

2. 事件捕获（Event Capturing）： 在事件捕获机制中，事件从文档的根节点开始传播，首先在最外层的祖先元素上触发，然后逐级向下传播到目标元素。换句话说，事件首先在最外层的祖先元素上触发，然后逐级向下，直到达到触发事件的元素。

事件冒泡和事件捕获的区别在于传播方向。默认情况下，大多数事件在事件冒泡阶段触发，即从目标元素向上冒泡到祖先元素。但你也可以选择在事件捕获阶段触发事件，通过将 addEventListener 函数的第三个参数设置为 true。这使得你可以在捕获阶段处理事件，然后在冒泡阶段再次处理事件。

例如，以下代码将在事件捕获阶段处理点击事件：

element.addEventListener('click', handleClick, true);

总结起来，事件冒泡和事件捕获是处理事件传播过程中的两种不同机制，开发者可以根据需要选择使用其中之一。

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

事件委托（Event Delegation）是一种 JavaScript 技术，用于通过将事件监听器绑定在父元素上，来处理其子元素的事件。这样做的好处是可以避免在子元素上逐个绑定事件监听器，提高性能并使代码更加简洁。事件委托利用了事件的冒泡机制，即事件从子元素触发后会逐级向上传播到父元素，从而在父元素上触发绑定的事件监听器。

区别：

• e.currentTarget：这是事件监听器当前正在处理事件的元素，也就是你绑定事件监听器的那个元素。无论事件是如何冒泡的，currentTarget 始终保持不变。

• e.target：这是实际触发事件的元素，即事件传播路径上的最底层元素。target 的值会根据事件的冒泡或捕获过程而变化。

举例来说，假设你有一个无序列表（<ul>）中的多个列表项（<li>），你可以将点击事件监听器绑定在无序列表上，然后根据 event.target 判断点击了哪个列表项。这样就不需要为每个列表项单独绑定事件监听器。

document.querySelector('ul').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clicked on:', event.target.textContent);
    }
});

在上面的例子中，无论点击哪个列表项，事件会冒泡到无序列表元素，然后事件监听器会检查 event.target 来确定实际触发事件的元素是哪个列表项。这就是事件委托的原理，它简化了事件处理代码并提高了性能。