事件

JavaScript和html之间的交互是通过事件实现的。事件就是用户或者浏览器自身执行的某种动作。响应某个事件的函数就叫做事件处理函数。

事件对象

当事件被触发时，浏览器会创建一个事件对象，这个对象包含了与事件相关的信息，比如事件的类型，事件发生的位置等。事件对象会在事件处理函数中作为参数传递。

常见的属性
event.target：事件源，即触发事件的元素。
event.type：事件类型（例如 "click", "keydown" 等）。
event.preventDefault()：阻止事件的默认行为（例如，阻止表单提交、链接跳转等）。
event.stopPropagation()：阻止事件的冒泡，防止事件传递到父元素。

  document.getElementById('myButton').addEventListener('click', function(event) {
    console.log(event.target);  // 输出触发事件的元素
    event.preventDefault();  // 阻止按钮的默认行为
});

事件绑定

将一个事件附加到DOM元素上的过程就是事件绑定。

事件绑定通常有三种方式

内联绑定

内联绑定就是在DOM元素中直接绑定事件。

  <!-- 在HTML中直接绑定点击事件 -->
  <button onclick="alert('按钮被点击了！')">点击我</button>

js代码绑定

通过对象.事件的形式给对象绑定事件。

 <button id="myButton">点击我</button>

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

    // 通过 JavaScript 绑定点击事件
    button.onclick = function() {
      alert('按钮被点击了！');
    };

代码绑定事件只能给一个DOM元素绑定一个函数，如果再次为onclick复制，会覆盖原有的绑定事件。

事件监听器

通过addEventListener()方法给对象绑定事件，是最推荐的事件绑定方法，它可以为同一个事件绑定多个事件处理程序，并且可通过removeEventListener()方法移除事件处理程序。支持事件的捕获和冒泡机制，更灵活。

 <button id="myButton">点击我</button>

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

    // 使用 addEventListener 为按钮绑定事件
    button.addEventListener('click', function() {
      alert('按钮被点击了！');
    });
    
    // 同一个元素可以绑定多个事件处理程序
    button.addEventListener('click', function() {
      console.log('按钮点击了，执行第二个事件处理程序');
    });

通过button.addEventListener('click', function() {})绑定事件可以为同一个按钮绑定多个click事件。

事件回调机制

事件回调机制是js和浏览器交互的核心，通过addEventListener绑定事件与回调函数，当事件触发时，回调函数会被调用。

事件冒泡

事件冒泡描述了浏览器如何处理针对嵌套元素的事件。事件开始的时候从最深层节点接收，之后沿DOM树逐级向上传播，直至document对象。

事件捕获

事件捕获和事件冒泡是相反的，事件捕获是从最顶层节点开始接收事件，然后逐级向下传播，直至最深层节点。

事件的默认传播顺序是先通过捕获阶段从顶级父元素向下传播，到达目标元素之后通过冒泡阶段向上传播，到达顶级父元素结束。

可以通过addEventListener()方法的第三个参数来设置事件处理程序的执行时机，true表示捕获阶段，false表示冒泡阶段。

// 事件捕获阶段
document.getElementById('parent').addEventListener('click', function(event) {
    console.log('捕获阶段触发');
}, true);  // true 表示捕获阶段

// 事件冒泡阶段
document.getElementById('parent').addEventListener('click', function(event) {
    console.log('冒泡阶段触发');
}, false);  // false 表示冒泡阶段

事件委托原理与实现

事件委托利用事件冒泡机制来捕获事件，而不是将事件绑定到每个子元素上。比如将一个点击事件绑定到父元素，当子元素被点击时，事件会冒泡到父元素，这时父元素的事件监听器就能捕获这个事件。

如果给每个子元素绑定点击事件，当子元素很多时，性能会下降。而事件委托只需要在父元素上绑定一次事件，就可以处理所有子元素的事件，提高了性能。

事件委托通常用于为许多相似的元素添加相同的处理，但不仅限于此。例如可以在父容器元素上绑定事件，之后找到event.target，事件发生在指定元素内就处理该事件。

具象化的例子：一个有9个单元格的table表格，点击任意单元格，都会触发事件，并高亮显示该单元格。（也可以是99个单元格，999个单元格甚至更多）。
实现：table添加点击事件并添加监听器，捕获所有的td去除高亮，之后使用event.target给点击的td设置高亮。

html

<table id="table">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>

style

<style>
    /* 高亮显示的样式 */
    .highlight {
      background-color: yellow;
    }

    /* 给表格添加一些样式 */
    table {
      border-collapse: collapse;
      width: 100%;
    }

    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
      cursor: pointer;
    }
  </style>

js

 // 获取表格元素
    const table = document.getElementById('table');

    // 为表格绑定点击事件
    table.addEventListener('click', function(event) {
      // 确保点击的目标是 <td> 元素
      if (event.target.tagName === 'TD') {
        // 移除所有 <td> 的高亮
        const allTd = table.getElementsByTagName('td');
        for (let td of allTd) {
          td.classList.remove('highlight');
        }

        // 为当前点击的 <td> 添加高亮
        event.target.classList.add('highlight');
      }
    });

异步回调机制

js是单线程的编程语言，事件回调机制和异步编程（如setTimeout、Promise、async/await）结合紧密。事件回调通常是在事件队列中异步执行的，这意味着他们会在当前执行栈中的代码执行完毕后才会执行。

console.log('开始');
setTimeout(function() {
    console.log('回调函数执行');
}, 0);
console.log('结束');

输出顺序

开始
结束
回调函数执行

事件回调的执行顺序

1. 事件触发并将回调函数加入任务队列
2. 执行当前栈中的同步代码
3. 同步代码执行完毕，事件队列中的回调函数被放入执行栈中执行。

事件处理常见问题与方案详解

事件处理程序被覆盖：使用 addEventListener 绑定多个事件处理程序。 事件冒泡与捕获：使用 event.stopPropagation() 阻止冒泡，并通过 addEventListener 设置捕获或冒泡阶段。 性能问题：使用事件委托将事件绑定到父元素，减少内存消耗。 this 指向问题：使用普通函数确保 this 指向正确的元素，或者通过 bind() 绑定 this，箭头函数注意 异步问题：使用 async/await 或事件处理程序处理异步操作。 防止多次绑定事件：通过 { once: true } 选项确保事件处理程序只触发一次。