事件及事件绑定 && 事件对象及事件传播——基础知识（脑图梳理）

前端

2023-12-20 20:58:27

1. 事件监听

事件监听是浏览器等待特定事件发生的机制，一旦发生，就会触发相应的回调函数。常见的方法包括addEventListener和removeEventListener。

addEventListener() 方法用于添加事件监听器，它接受三个参数：

事件类型（例如，“click”、“mouseover”、“keydown”）
事件处理函数（当事件发生时触发的函数）
布尔值（可选），表示是否在捕获阶段还是冒泡阶段处理事件。默认情况下，事件在冒泡阶段被处理。

removeEventListener() 方法用于删除事件监听器，它接受两个参数：

事件类型
事件处理函数

2. 事件对象

事件对象是当事件发生时传递给事件处理函数的对象。它包含有关事件的信息，例如事件类型、目标元素和事件发生时的坐标。

以下是一些常用的事件对象属性：

type ：事件类型
target ：事件目标元素
clientX 和 clientY ：事件发生时的鼠标坐标
pageX 和 pageY ：事件发生时的页面坐标
stopPropagation() ：阻止事件冒泡
preventDefault() ：阻止事件的默认行为

3. 事件传播

事件传播是指事件从目标元素到祖先元素传播的过程。事件传播分为捕获阶段和冒泡阶段。

捕获阶段 ：事件从目标元素传播到祖先元素。
冒泡阶段 ：事件从祖先元素传播到目标元素。

默认情况下，事件在冒泡阶段被处理。但是，您可以通过在addEventListener()方法中设置第三个参数为true来在捕获阶段处理事件。

4. 事件委托

事件委托是一种将事件监听器附加到祖先元素而不是目标元素的技巧。这可以简化事件处理，因为您只需要为一个祖先元素添加一个事件监听器，而不是为每个目标元素添加一个事件监听器。

以下是如何使用事件委托的示例：

document.body.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    // 按钮被点击了
  }
});

5. 图例：事件与事件绑定的脑图梳理

                                  - addEventListener()
                                  - removeEventListener()
                          事件监听      ——
                            |               |
                   事件对象   |               |   事件传播
                            |               |
                           ——             ——
                          /                 |
       事件委托        |                 |  捕获阶段
                        |                 |
                       ——               ——
                      /                   |
                   /                     |
                 /                       |
               /                         |
              |                          |
              V                          V
          addEventListener()        removeEventListener()