事件监听

事件监听让页面能够响应用户的各种操作，是交互的核心。

addEventListener

基本语法

element.addEventListener(event, handler, options);

基本用法

const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

箭头函数写法

btn.addEventListener('click', () => {
  console.log('点击了');
});

事件对象

btn.addEventListener('click', (e) => {
  console.log(e.target);      // 触发事件的元素
  console.log(e.currentTarget); // 绑定事件的元素
});

第三个参数options

布尔值形式

// true: 捕获阶段触发
// false: 冒泡阶段触发（默认）
element.addEventListener('click', handler, true);

对象形式

element.addEventListener('click', handler, {
  capture: false,   // 是否捕获阶段
  once: true,       // 是否只触发一次
  passive: true     // 是否不调用preventDefault
});

removeEventListener

移除事件监听器：

function handler() {
  console.log('点击');
}

btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);

注意：移除时必须传入相同的函数引用，匿名函数无法移除。

传统事件绑定

DOM属性方式

btn.onclick = function() {
  console.log('点击');
};

行内事件（不推荐）

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

两种方式对比

要点总结

1. 推荐使用 addEventListener 绑定事件
2. 需要移除时保存函数引用，匿名函数无法移除
3. once: true 可实现只触发一次的效果
4. passive: true 可提升滚动性能
5. 避免使用行内事件和 onclick 属性