JS原生事件如何绑定

1. HTML内联事件绑定（不推荐）

直接在HTML标签中使用on事件属性绑定函数。

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

<script>
function handleClick() {
  alert('按钮被点击！');
}
</script>

缺点：耦合HTML和JS代码，难以维护，无法绑定多个处理函数。

2. DOM元素on事件属性（传统方式）

通过JS获取DOM元素后，直接赋值给on事件属性。

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

btn.onclick = function() {
  alert('按钮被点击！');
};

// 或绑定命名函数
btn.onclick = handleClick;
function handleClick() {
  alert('按钮被点击！');
}

缺点：同一事件只能绑定一个处理函数（后绑定的会覆盖前面的）。

3. addEventListener()（推荐方式）

现代标准方法，支持绑定多个处理函数，且可控制事件阶段（冒泡/捕获）。

基本语法：

element.addEventListener(event, handler, useCapture);

• event：事件类型（字符串，如'click'）

• handler：事件处理函数

• useCapture：是否在捕获阶段触发（默认false，冒泡阶段触发）

示例：

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

// 绑定匿名函数
btn.addEventListener('click', function() {
  alert('按钮被点击！');
});

// 绑定命名函数
function handleClick() {
  alert('按钮被点击！');
}
btn.addEventListener('click', handleClick);

// 绑定多个处理函数（不会覆盖）
btn.addEventListener('click', function() {
  console.log('另一个处理函数');
});

移除事件监听：

// 必须使用相同的函数引用才能移除
btn.removeEventListener('click', handleClick); // 移除成功
btn.removeEventListener('click', function() { ... }); // 无法移除（匿名函数引用不同）

4. 事件对象（Event Object）

事件处理函数默认接收一个event对象，包含事件相关信息：

btn.addEventListener('click', function(event) {
  console.log(event.type);      // 事件类型（如'click'）
  console.log(event.target);    // 触发事件的元素
  console.log(this);            // 绑定事件的元素（btn）
  
  // 阻止默认行为（如阻止表单提交）
  event.preventDefault(); 
  
  // 阻止事件冒泡
  event.stopPropagation();
});

5. 事件冒泡与捕获

• 冒泡（Bubbling）：事件从目标元素向上传播到父元素（默认）。

• 捕获（Capturing）：事件从父元素向下传播到目标元素。

<div id="parent">
  <button id="child">点击</button>
</div>

<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 捕获阶段触发（true）
parent.addEventListener('click', () => console.log('Parent Capture'), true);

// 冒泡阶段触发（默认）
child.addEventListener('click', () => console.log('Child Bubble'));
parent.addEventListener('click', () => console.log('Parent Bubble'));
</script>

输出顺序（点击按钮时）：

1. Parent Capture（捕获阶段）

2. Child Bubble（目标阶段）

3. Parent Bubble（冒泡阶段）

6. 事件委托（Event Delegation）

利用事件冒泡机制，将事件绑定到父元素处理子元素事件：

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

<script>
const list = document.getElementById('list');

list.addEventListener('click', function(event) {
  // 检查点击的是否是li元素
  if (event.target.tagName === 'LI') {
    console.log('点击了:', event.target.textContent);
  }
});
</script>

优点：减少事件监听数量，动态添加的子元素也能自动绑定事件。

总结对比

最佳实践：优先使用addEventListener()，结合事件委托优化性能。