js绑定和解绑事件一、事件绑定的三种方式（基础原理） 1. DOM 属性绑定（内联方式）语法：直接在 HTML 标签中

一、事件绑定的三种方式（基础原理）

1. DOM 属性绑定（内联方式）

语法：直接在 HTML 标签中设置事件属性

示例：

<button onclick="handleClick()">点击我</button>

特点：
- 简单直观，但逻辑与 HTML 耦合，不利于维护
- 事件处理函数中 this 指向当前 DOM 元素
- 限制：仅能绑定单个事件，无法绑定同名事件

2. DOM 对象属性绑定（脚本方式）

语法：通过 JS 直接操作 DOM 的事件属性

示例：

const btn = document.getElementById('btn');
btn.onclick = function() {
  console.log('点击事件触发');
};

特点：
- 逻辑与 HTML 分离，符合关注点分离原则
- 同一事件属性（如 onclick）只能绑定一个函数，后绑定的会覆盖前一个
- this 指向当前 DOM 元素

3. 事件监听 API（推荐方式）

语法：使用 addEventListener 方法

示例：

const btn = document.getElementById('btn');
// 绑定事件
btn.addEventListener('click', handleClick, { capture: false });
// 带参数的事件处理函数
btn.addEventListener('click', (e) => handleClick(e, '参数'));

function handleClick(e, param) {
  console.log('事件参数：', param);
}

特点：
- 支持绑定多个同名事件，按绑定顺序依次触发
- 可设置事件捕获/冒泡阶段（capture 参数）
- 支持被动事件（passive: true）优化滚动性能
- this 指向当前 DOM 元素（可通过 bind 改变上下文）

二、事件解绑的三种对应方式

1. DOM 属性解绑

语法：将事件属性设置为 null 或空函数

示例：

<button id="btn" onclick="handleClick()">点击我</button>

document.getElementById('btn').onclick = null; // 解绑

2. DOM 对象属性解绑

语法：将事件属性设置为 null

示例：

const btn = document.getElementById('btn');
btn.onclick = function() { ... }; // 绑定
btn.onclick = null; // 解绑

3. 事件监听 API 解绑（关键要点）

语法：使用 removeEventListener，必须传入与绑定相同的函数引用

示例：

const btn = document.getElementById('btn');
// 正确解绑：使用同一函数引用
const handler = function() { console.log('点击'); };
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler); // 成功解绑

// 错误示例：匿名函数无法解绑
btn.addEventListener('click', function() { ... });
btn.removeEventListener('click', function() { ... }); // 无效！

注意事项：
1. 箭头函数无法解绑：因每次创建的箭头函数是新的引用
2. 带参数的函数解绑：需通过封装函数或 Event.data 传递参数
3. 解绑时需保持参数一致：捕获/冒泡阶段（capture）需与绑定时相同

三、问题

1. 问：addEventListener 第三个参数的作用？

答：
第三个参数可以是布尔值或对象：
- 布尔值（capture）：true 表示在捕获阶段触发，false（默认）表示在冒泡阶段触发
- 对象（options）：
  - capture: true/false：同上
  - passive: true：声明事件处理函数不会调用 preventDefault，优化滚动性能
  - once: true：事件触发一次后自动解绑

2. 问：如何解绑匿名函数绑定的事件？

答：
匿名函数无法直接通过 removeEventListener 解绑，可通过以下方案：

封装函数引用：

const handler = () => { ... };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

事件委托+命名空间：
通过父元素统一管理事件，利用事件对象 event.target 判断触发源

WeakMap 缓存引用：（适用于复杂场景）

const handlers = new WeakMap();
const element = document.getElementById('btn');
const handler = () => { ... };
handlers.set(element, handler);
element.addEventListener('click', handler);
// 解绑时
element.removeEventListener('click', handlers.get(element));

3. 问：事件委托的原理及应用场景？

答：
- 原理：利用事件冒泡机制，将事件绑定在父元素上，通过 event.target 判断实际触发的子元素
- 优势：
  1. 减少事件绑定数量，优化性能（尤其适用于动态添加的元素）
  2. 自动支持后续新增的子元素，无需重复绑定
- 示例：
```
// 为所有 li 绑定点击事件（即使后续动态添加 li）
ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('点击了 li:', e.target.textContent);
  }
});
```
- 场景：列表项点击、动态按钮组、移动端手势事件等

4. 问：解绑事件时需要注意哪些内存泄漏问题？

答：
事件绑定若未解绑，可能导致内存泄漏，典型场景：
1. 全局事件监听：如窗口滚动、resize 事件，页面卸载前需解绑
2. 定时器与 interval：使用 clearInterval 清除
3. 组件销毁场景：
  - React 中在 componentWillUnmount 解绑
  - Vue 中在 beforeDestroy 钩子中调用 removeEventListener
4. 闭包引用：事件处理函数中若引用外部变量，需确保变量可被垃圾回收

四、实战优化：高性能事件绑定策略

1. 事件委托优化动态元素

// 错误做法：为每个动态按钮单独绑定事件（性能差）
function addButtons(buttons) {
  buttons.forEach(btn => {
    btn.addEventListener('click', handleClick);
  });
}

// 正确做法：事件委托
const container = document.getElementById('button-container');
container.addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    handleClick(e.target);
  }
});

2. 被动事件优化滚动性能

// 声明 passive: true 避免滚动卡顿
window.addEventListener('scroll', () => {
  // 滚动处理逻辑
}, { passive: true });

3. 一次性事件绑定（once 选项）

// 按钮点击一次后自动解绑
btn.addEventListener('click', handleClick, { once: true });

五、总结

“事件绑定主要有三种方式：内联属性、DOM 属性、addEventListener，其中 addEventListener 是最灵活的方案，支持多事件绑定、捕获/冒泡阶段控制和性能优化（如 passive 选项）。
解绑事件时需注意：

必须使用与绑定相同的函数引用，避免匿名函数
组件销毁或页面卸载前，需解绑全局事件（如 resize、scroll）
动态元素推荐用事件委托，减少绑定数量并自动支持新增元素
实际项目中，我曾在管理系统中通过事件委托优化表格行点击事件，将事件绑定数量从 100+ 减少到 1，同时解决了动态加载行的事件绑定问题，性能提升显著。”