JavaScript DOM 事件流：从基础传播到高级控制与自定义实践

逆袭的小黄鸭2025-04-11 14:44

从页面元素被点击的瞬间，到浏览器如何响应并处理这一操作，背后涉及到一系列复杂而有序的流程，即事件流。它涵盖了事件的冒泡、捕获、委托以及各种阻止机制，这些概念相互交织，共同塑造了我们所熟知的动态网页体验。

一、事件传播的核心机制

事件冒泡（Event Bubbling）

事件冒泡是默认的事件传播方式，高达 95% 的事件类型都支持这一特性，常见的如 click（点击）、keydown（按键按下）等事件。例如，在一个包含父子元素的 HTML 结构中：

html 复制代码 
<div class="parent">
  <div class="child">点击我</div>
</div>
javascript 复制代码 
document.querySelector('.child').addEventListener('click', () => {
  console.log('子元素被点击');
});
document.querySelector('.parent').addEventListener('click', () => {
  console.log('父元素捕获点击事件');
});

当点击子元素时，首先子元素的点击事件处理函数会被触发，输出 "子元素被点击"，随后由于事件冒泡，父元素的点击事件处理函数也会被触发，输出 "父元素捕获点击事件"。不过，也有一些特殊事件，像 focus（元素获得焦点）、blur（元素失去焦点）并不支持冒泡，它们的传播方式有所不同。

事件捕获（Event Capturing）

事件捕获是 DOM 事件流中的一种机制，与事件冒泡相反。在事件捕获过程中，事件从文档的根节点开始，逐步向下传播到触发事件的具体元素。具体做法是在addEventListener方法的第三个参数中传入true或者设置{capture: true}。例如：

javascript 复制代码 
document.querySelector('.parent').addEventListener('click', () => {
  console.log('父元素在捕获阶段捕获点击事件');
}, true);

事件委托（Event Delegation）

事件委托是利用事件冒泡的原理，将子元素的事件委托给父元素来处理的一种技术。通过在父元素上添加一个事件监听器，就可以处理其所有子元素触发的同一类型事件。这在处理大量相似元素的事件时，能显著减少内存占用和提高性能。

比如，有一个包含多个列表项的无序列表，每个列表项都需要一个点击事件：

html 复制代码 
<ul id="myList">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <!-- 可能有更多列表项 -->
</ul>

如果为每个列表项单独添加点击事件监听器，代码如下：

javascript 复制代码 
const listItems = document.querySelectorAll('#myList li');
listItems.forEach((item) => {
    item.addEventListener('click', () => {
        console.log('列表项被点击');
    });
});

为每个列表项单独添加点击事件监听器时，有多少个列表项，就会创建多少个对应的事件监听器。当列表项数量较多时，会占用大量内存。而使用事件委托，只需在父元素 <ul> 上添加一个点击事件监听器：

javascript 复制代码 
document.getElementById('myList').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        console.log('列表项被点击');
    }
});

通过检查 event.target 是否为目标子元素（这里是 <li> 元素），父元素就能正确处理子元素触发的事件。无论子元素（列表项）有多少个，都只需要这一个监听器来处理所有子元素的相关事件。相比逐个绑定，大大减少了事件监听器的数量，也就减少了内存中用于存储监听器相关信息的空间占用 。

二、DOM 事件流的三阶段模型

在浏览器环境里，每当用户与页面进行交互，比如点击按钮、滚动页面，事件便会按照既定路径传播。DOM 事件流将此过程清晰地划分为三个阶段。

捕获阶段（Capture Phase）

事件传播起始于根节点，即 window 对象，然后像水流一样逐级向下，朝着目标元素的父节点蔓延。

以一个常见的页面结构为例，若点击一个位于多层嵌套 div 内的按钮，捕获阶段的传播路径可能是：window -> document -> html -> body -> div.parent -> div.target 。在这一阶段，事件就像是在自上而下地 "搜索" 目标元素，沿途经过的每个节点都有机会对事件进行预先处理。不过，在实际开发中，捕获阶段的应用相对较少，大多数开发者更熟悉后续的阶段。

目标阶段（Target Phase）

当事件历经捕获阶段，最终抵达实际触发事件的元素时，便进入了目标阶段。此时，该元素上绑定的事件处理程序会被执行，对事件做出相应的反应。

例如被点击的按钮，如果它有自己的点击事件处理函数，那么在这个阶段，函数内的逻辑就会被触发执行。

冒泡阶段（Bubble Phase）

事件在目标阶段处理完毕后，并不会就此终结，而是会从目标元素开始，像气泡从水底往上升一样，逐级向上返回到根节点。依旧以上述结构为例，冒泡阶段的路径为：div.target -> div.parent -> body -> html -> document -> window 。这一阶段是事件传播中最为常用和广泛应用的部分，许多基于事件的交互逻辑都依赖于事件冒泡机制来实现。

三、事件捕获的应用

1. 全局事件处理

在一些情况下，你可能希望在事件到达目标元素之前对其进行拦截和处理。例如，你可以在文档的根元素（如 document 或 html 元素）上设置事件捕获监听器，用于捕获所有的点击事件。这样可以在事件到达具体元素之前执行一些全局的逻辑，如日志记录、权限检查等。

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button id="sensitive-action">敏感操作按钮</button>
    <script>
        document.addEventListener('click', function (event) {
            const hasPermission = false; // 假设用户没有权限
            if (event.target.id === 'sensitive-action' && !hasPermission) {
                event.stopPropagation();
                event.preventDefault();
                console.log('你没有权限执行此操作');
            }
        }, true);

        document.getElementById('sensitive-action').addEventListener('click', function () {
            console.log('敏感操作被执行');
        });
    </script>
</body>

</html>

2. 优先级处理

事件捕获允许你在事件冒泡之前对事件进行处理。例如，你有一个嵌套的菜单系统，当用户点击菜单项时，你希望先在父菜单上进行一些操作，然后再让事件冒泡到子菜单项。通过在父菜单上设置事件捕获监听器，可以确保父菜单的处理逻辑优先执行。

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="top - menu">
        <div class="sub - menu">
            <button class="menu - item">菜单项</button>
        </div>
    </div>
    <script>
        document.querySelector('.top - menu').addEventListener('click', function () {
            console.log('顶级菜单在捕获阶段被触发');
        }, true);
        document.querySelector('.sub - menu').addEventListener('click', function () {
            console.log('子菜单在捕获阶段被触发');
        }, true);
        document.querySelector('.menu - item').addEventListener('click', function () {
            console.log('菜单项被点击');
        }, false);
    </script>
</body>

</html>

点击按钮时，会先触发捕获阶段的事件（从外向内）然后触发按钮本身的冒泡阶段事件。输出顺序将是：

  • "顶级菜单在捕获阶段被触发"
  • "子菜单在捕获阶段被触发"
  • "菜单项被点击"

四、事件控制的核心方法

阻止传播方法对比

在事件处理过程中，我们有时需要阻止事件的传播，JavaScript 提供了两种主要方法：

event.stopPropagation()

  • 用于阻止事件在 DOM 树中继续传播。在事件捕获阶段，它会阻止事件继续向下传播到子元素；在事件冒泡阶段，它会阻止事件继续向上传播到父元素。但它不会影响当前元素上其他事件监听器的执行。
    • 例如，在一个元素上同时绑定了两个点击事件监听器，在其中一个监听器中调用event.stopPropagation()，另一个监听器仍然会被执行。
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="parent">
        <div class="child">点击我</div>
    </div>
    <script>
        document.querySelector('.parent').addEventListener('click', () => {
            console.log('父元素监听到点击事件');
        });

        document.querySelector('.child').addEventListener('click', (event) => {
            console.log('子元素监听到点击事件');
            event.stopPropagation(); // 阻止事件继续传播
        });
    </script>
</body>

</html>
  • 当点击 child 元素时，首先会触发 child 元素上的点击事件监听器，输出 "子元素监听到点击事件"。
  • 接着调用 event.stopPropagation() 方法，阻止事件继续向上冒泡到 parent 元素。
  • 因此，parent 元素上的点击事件监听器不会被触发，不会输出 "父元素监听到点击事件"。

同一元素多个监听器情况

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="child">点击我</div>
    <script>
        const child = document.querySelector('.child');
        child.addEventListener('click', (event) => {
            console.log('第一个监听器');
            event.stopPropagation();
        });
        child.addEventListener('click', () => {
            console.log('第二个监听器');
        });
    </script>
</body>

</html>

在这个例子中，点击 child 元素时，虽然第一个监听器中调用了 event.stopPropagation()，但第二个监听器仍然会被执行，会依次输出 "第一个监听器" 和 "第二个监听器"。

event.stopImmediatePropagation()

  • 此方法更为彻底，它会立即停止所有事件传播，不仅阻止事件向其他元素传播，还会阻止当前元素上后续绑定的事件监听器的执行。如果在一个元素上的某个事件监听器中调用了event.stopImmediatePropagation()，那么该元素上其他的同类事件监听器将不会被触发。
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="child">点击我</div>
    <script>
        const child = document.querySelector('.child');
        child.addEventListener('click', (event) => {
            console.log('第一个监听器');
            event.stopImmediatePropagation(); // 立即停止所有事件传播
        });
        child.addEventListener('click', () => {
            console.log('第二个监听器');
        });
    </script>
</body>

</html>
  • 当点击 child 元素时，首先会触发第一个点击事件监听器，输出 "第一个监听器"。
  • 接着调用 event.stopImmediatePropagation() 方法，这会立即停止所有事件传播，包括当前元素上后续绑定的同类事件监听器。
  • 因此，第二个点击事件监听器不会被触发，不会输出 "第二个监听器"。

阻止默认行为

在 HTML 中，许多元素都有默认行为，比如点击链接会跳转到指定页面，提交表单会刷新页面等。在 JavaScript 中，我们可以使用event.preventDefault()方法来阻止这些默认行为。例如，在表单提交时进行验证，如果验证失败，我们可以阻止表单提交：

html 复制代码 
<form id="myForm">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', (e) => {
    const username = e.target.username.value;
    if(username === '') {
      e.preventDefault();
      alert('用户名不能为空');
    }
  });
</script>

但event.preventDefault()方法仅阻止元素的默认行为，并不会影响事件在 DOM 树中的传播过程，事件仍然会按照捕获、目标、冒泡的顺序进行传播。

五、事件处理的性能优化

在实际开发中，性能优化是至关重要的一环。在事件处理方面，有以下几点需要注意：

  • 避免复杂计算 ：对于频繁触发的事件，如mousemove（鼠标移动）事件，应避免在事件处理函数中进行复杂的计算操作。

    • 因为每次触发这类事件都执行复杂计算，会严重影响页面性能，导致卡顿。
    • 可以考虑使用防抖（Debounce）或节流（Throttle）技术，对事件触发频率进行控制，减少不必要的计算。

  • 选择合适父元素：在使用事件委托时，要注意选择最近的公共父元素来添加事件监听器。

    • 如果选择的父元素层级过高，可能会捕获到过多不必要的事件，增加事件处理的负担；
    • 而如果选择的父元素层级过低，可能无法覆盖所有需要处理的子元素，失去事件委托的意义。

  • 及时移除监听器：当某个元素不再需要事件监听器时，应及时将其移除。

    • 例如，在一个弹出框组件关闭后，其相关的事件监听器如果没有被移除，可能会继续占用内存资源，甚至可能在后续操作中引发意外的事件触发。可以通过在元素的remove事件或组件的卸载生命周期中，添加移除事件监听器的逻辑。

六、自定义事件（Custom Events）

什么是自定义事件

在 JavaScript 编程中，原生事件（如点击、鼠标移动、页面加载完成等）由浏览器预先定义并在特定交互或状态变化时自动触发。而自定义事件是开发者根据自身业务逻辑和功能需求，自行创建并触发的事件。

为什么需要自定义事件

  • 解耦代码 ：在复杂项目中，不同模块可能需要相互协作，但又不希望产生紧密的依赖关系。自定义事件允许模块间通过事件进行松散耦合的通信。
    • 例如，一个负责数据获取的模块和一个负责界面渲染的模块，数据获取完成时，通过触发自定义事件通知渲染模块更新界面，两者无需直接调用对方的方法，提高了代码的可维护性与可扩展性。
  • 实现特定业务逻辑 ：原生事件无法满足所有业务场景的交互需求。
    • 比如在一个在线游戏中，当玩家完成特定任务时，需要触发一系列复杂的奖励发放和状态更新操作，此时可定义一个 "taskCompleted" 自定义事件，在任务完成处触发，集中处理相关逻辑。
  • 增强组件化开发能力 ：在构建可复用的组件时，自定义事件是组件与外部环境沟通的重要手段。
    • 组件内部发生某些关键状态变化（如一个下拉菜单组件被收起或展开）时，通过触发自定义事件告知使用该组件的其他部分，方便进行统一的事件处理和界面响应。

自定义事件的创建

在 JavaScript 里，可通过两种方式创建自定义事件对象：

  • 使用 Event 构造函数：适用于无需传递额外数据，仅触发特定事件通知的场景。它只需一个事件类型（字符串）作为参数。示例如下：
javascript 复制代码 
const simpleEvent = new Event('simpleCustomEvent');
  • 使用 CustomEvent 构造函数 ：当需要在事件中传递额外数据时使用。它接收事件类型（字符串）和配置对象两个参数，配置对象的 detail 属性可携带任意数据。示例如下：
javascript 复制代码 
const complexEvent = new CustomEvent('complexCustomEvent', {
    detail: {
        message: '这是自定义事件携带的数据'
    }
});

自定义事件的触发

触发自定义事件要使用 dispatchEvent 方法，步骤如下：

  • 利用 document.getElementById 等 DOM 选择方法获取目标元素。
  • 在目标元素上调用 dispatchEvent 方法并传入事件对象。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<body>
    <!-- 用于触发自定义事件的元素 -->
    <div id="triggerDiv">点击触发自定义事件</div>
    <script>
        // 获取目标元素
        const target = document.getElementById('triggerDiv');
        // 创建自定义事件，携带信息
        const customEvent = new CustomEvent('myEvent', {
            detail: { info: '事件携带的信息' }
        });
        // 点击时触发自定义事件
        target.addEventListener('click', () => {
            target.dispatchEvent(customEvent);
        });
    </script>
</body>
</html>

自定义事件的监听

使用 addEventListener 方法监听自定义事件，步骤如下：

  • 获取目标元素。
  • 在目标元素上调用 addEventListener 方法，第一个参数为事件类型，需与创建事件时一致；第二个参数是事件触发时执行的回调函数。

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<body>
    <button id="eventButton">触发自定义事件</button>
    <script>
        const button = document.getElementById('eventButton');
        // 创建自定义事件，携带示例数据
        const myEvent = new CustomEvent('customAction', {
            detail: { data: '示例数据' }
        });
        // 监听自定义事件，打印数据
        button.addEventListener('customAction', (event) => {
            console.log(event.detail.data);
        });
        button.addEventListener('click', () => {
            button.dispatchEvent(myEvent);
        });
    </script>
</body>
</html>

自定义事件与事件流

自定义事件遵循 DOM 事件流规则，包括捕获阶段、目标阶段和冒泡阶段。可以利用事件流特性管理自定义事件，例如在父元素上监听子元素触发的自定义事件：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<body>
    <!-- 父元素，将在此监听自定义事件 -->
    <div id="outerDiv">
        <!-- 子元素按钮，点击将触发自定义事件 -->
        <button id="innerButton">触发自定义事件</button>
    </div>
    <script>
        // 获取子元素按钮
        const button = document.getElementById('innerButton');
        // 获取父元素
        const outer = document.getElementById('outerDiv');
        // 创建自定义事件对象，携带数据表明事件起源
        const event = new CustomEvent('myCustom', {
            detail: { origin: 'innerButton' }
        });
        // 父元素在捕获阶段监听自定义事件
        outer.addEventListener('myCustom', (e) => {
            console.log(`父元素捕获到来自 ${e.detail.origin} 的自定义事件`);
        }, true);
        // 按钮点击时触发自定义事件
        button.addEventListener('click', () => {
            button.dispatchEvent(event);
        });
    </script>
</body>
</html>

在父元素 outerDiv 上通过事件捕获方式监听子元素 innerButton 触发的自定义事件 myCustom。

相关推荐
kovlistudio9 分钟前
红宝书第三十六讲：持续集成（CI）配置入门指南
开发语言·前端·javascript·ci/cd·npm·node.js
Danta17 分钟前
面试场景题：性能的检测
前端·javascript·面试
龙萌酱35 分钟前
力扣每日打卡 50. Pow(x, n) (中等)
前端·javascript·算法·leetcode
Tetap1 小时前
element-plus color-pick扩展记录
前端·vue.js
H5开发新纪元1 小时前
从零开发一个基于 DeepSeek API 的 AI 助手：完整开发历程与经验总结
前端·架构
HHW1 小时前
告别龟速下载！NRM：前端工程师的镜像源管理加速器
前端
伶俜monster1 小时前
Threejs 奇幻几何体：边缘、线框、包围盒大冒险
前端·webgl·three.js
用户11481867894841 小时前
大文件下载、断点续传功能
前端·nestjs
顾林海1 小时前
Flutter 文本组件深度剖析：从基础到高级应用
android·前端·flutter
夜宵饽饽1 小时前
传输层-MCP的搭建（一）
javascript·后端
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03如何在WPS和Word/Excel中直接使用DeepSeek功能04游戏引擎学习第217天05DeepSeek RAGFlow构建本地知识库系统06DeepSeek各版本说明与优缺点分析07汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量08从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10【大模型+本地自建知识图谱/GraphRAG/neo4j/ollama+Qwen千问（或llama3）】 python实战（中）