JavaScript中可为同一事件绑定多个监听函数，浏览器按添加顺序依次执行；推荐使用addEventListener，支持重复添加、单独移除，需避免匿名函数以确保可移除性，注意捕获与冒泡阶段的执行顺序。

JavaScript 中可以为同一个事件绑定多个监听函数，浏览器会按添加顺序依次执行它们，互不影响。

使用 addEventListener 绑定多个监听器

这是标准且推荐的方式。同一个元素、同一事件类型（如 click）、不同处理函数，可多次调用 addEventListener：

• 每次调用都会新增一个监听器，不会覆盖已有监听器
• 支持重复添加相同函数（除非显式传入 { once: true } 或使用相同 options 对象）
• 可通过 removeEventListener 单独移除指定监听器（需保留函数引用）

示例：

const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('第一 handler'));
btn.addEventListener('click', () => console.log('第二 handler'));
// 点击时依次输出两行

避免匿名函数导致无法移除

如果用匿名函数绑定，后续无法精准移除——因为每次声明都是新函数实例：

立即学习“Java免费学习笔记（深入）”；

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• ❌ 错误写法：btn.addEventListener('click', function() { ... }); → 移除时无法引用原函数
• ✅ 正确做法：用具名函数或变量保存引用

示例：

function handleClick1() { console.log('A'); }
function handleClick2() { console.log('B'); }
btn.addEventListener('click', handleClick1);
btn.addEventListener('click', handleClick2);
// 后续可精确移除：
btn.removeEventListener('click', handleClick1);

注意事件冒泡与捕获阶段

多个监听器可能在不同阶段触发：

• 默认在 冒泡阶段 执行（从目标向上冒泡）
• 若第三个参数为 true，则在 捕获阶段 执行（从根向下传递）
• 捕获监听器先于冒泡监听器执行，同阶段按注册顺序执行

示例：

btn.addEventListener('click', () => console.log('捕获'), true);
btn.addEventListener('click', () => console.log('冒泡1'));
btn.addEventListener('click', () => console.log('冒泡2'));
// 点击输出顺序：捕获 → 冒泡1 → 冒泡2

不推荐的旧方式：onxxx 属性赋值

element.onclick = handler 是单值绑定，后赋值会覆盖前一个：

• 只能绑定一个函数，无法叠加
• 不是事件机制的“多监听”方案，仅作对比参考

所以需要多个响应逻辑时，必须用 addEventListener。