JavaScript 中的事件模型，理解什么是事件捕获与冒泡、事件目标、事件委托、事件对象、事件处理程序、事件传播与组织

Sherry Tian

已于 2024-12-10 08:50:22 修改

阅读量1.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2024-09-26 21:28:22 首次发布

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/142578159

javascript 专栏收录该内容

69 篇文章

订阅专栏

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。
🎯如果你有任何困惑或疑问欢迎评论区给我留言哦，我收到后会第一时间为你答疑解惑😉

引言

JavaScript 中的事件模型是浏览器如何处理用户交互（如点击、键盘输入、鼠标移动等）或其他事件（如加载完成、定时器等）的机制。理解事件模型有助于我们处理这些事件并响应它们。JavaScript 的事件模型主要包括以下几个部分：

1. 事件流（Event Flow）

事件流是指事件在 DOM（文档对象模型）树中传播的过程。HTML 页面由 DOM 树表示，事件可以沿着 DOM 树的路径传播。事件流由三个阶段组成：

阶段 1：事件捕获阶段（Capturing Phase）

事件从最外层的元素（通常是 window 或 document）向下传播，依次经过各个子元素，直到事件目标元素。

阶段 2：目标阶段（Target Phase）

事件到达事件目标元素，即用户交互的具体元素。

阶段 3：事件冒泡阶段（Bubbling Phase）

事件从目标元素开始向上传播，依次经过其祖先元素，直到最外层的元素。

2. 事件冒泡（Event Bubbling）

事件冒泡是指事件首先在目标元素上触发，然后逐级向上传播到祖先元素，直到 window。这种机制允许我们在父级元素上监听子级元素的事件，因为事件最终会冒泡到父级元素。

举个栗子：

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
  });

  document.getElementById('child').addEventListener('click', function() {
    console.log('Child clicked');
  });
</script>

输出顺序：

Child clicked
Parent clicked

当点击按钮时，事件先在按钮上触发，然后冒泡到 div 父级元素上。

3. 事件捕获（Event Capturing）

与事件冒泡相反，事件捕获是事件从根元素向目标元素传播的过程。默认情况下，事件处理程序只会在冒泡阶段执行，但我们可以指定事件在捕获阶段执行。

举个栗子：

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent clicked');
  }, true); // 使用 true 表示捕获阶段

  document.getElementById('child').addEventListener('click', function() {
    console.log('Child clicked');
  });
</script>

输出顺序：

Parent clicked
Child clicked

在这个例子中，由于我们在 parent 的事件监听中使用了 true，parent 的点击事件首先在捕获阶段触发。

4. 事件委托（Event Delegation）

事件委托是利用事件冒泡机制，将事件监听器绑定到父级元素，而不是直接绑定在每个子元素上。这有助于减少内存消耗，特别是在动态生成的元素或大量子元素的情况下。

举个栗子：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log(event.target.innerText + ' clicked');
    }
  });
</script>

在这个例子中，我们将点击事件绑定到 ul 元素，而不是每个 li 元素。通过 event.target 判断具体点击的元素是哪一个子节点。

5. 事件对象（Event Object）

当事件触发时，浏览器会创建一个事件对象，并将其作为参数传递给事件处理函数。这个事件对象包含了有关事件的信息，包括事件类型、事件目标、鼠标位置、键盘按键等。

常用的属性和方法：

event.type：

事件的类型（如 'click'、'keydown'）。

event.target：

触发事件的元素。

event.currentTarget：

绑定事件处理程序的元素。

event.stopPropagation()：

阻止事件继续冒泡或捕获。

event.preventDefault()：

阻止事件的默认行为（如阻止链接跳转、表单提交等）。

event.clientX / event.clientY：

鼠标点击的横纵坐标。

举个栗子：

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Event type: ', event.type);        // 输出: 'click'
  console.log('Target: ', event.target);          // 输出: 触发点击的元素
  console.log('Mouse position: ', event.clientX, event.clientY); // 输出: 鼠标点击位置
});

6. 事件处理程序（Event Handlers）

事件处理程序是用户定义的函数，用于响应某个事件。事件处理程序可以通过三种方式添加到元素上：

HTML 属性方式：

<button onclick="handleClick()">Click me</button>

<script>
  function handleClick() {
    console.log('Button clicked');
  }
</script>

addEventListener 方法（推荐方式）：

document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
});

on 前缀属性（不推荐使用，可能会覆盖其他处理程序）：

document.getElementById('button').onclick = function() {
  console.log('Button clicked');
};

7. 事件传播与阻止

在 JavaScript 中，事件传播过程中可以通过两种方法来控制事件的传播：

event.stopPropagation()

阻止事件进一步传播（无论是冒泡还是捕获阶段）。常用于避免事件冒泡到父级元素中。

document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  console.log('Child clicked');
});

event.preventDefault()

阻止事件的默认行为，如表单提交、链接跳转等。

document.getElementById('link').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  console.log('Link clicked but default action prevented');
});