原生 JavaScript 中事件绑定的三种方式

引言

在 Web 开发中，事件绑定是与用户交互的核心机制。无论是点击按钮、输入文本，还是拖动页面元素，我们都需要通过事件来响应这些动作。

一、HTML 标签中的事件属性绑定

这是最早期也是最简单的事件绑定方式，通过在 HTML 标签上直接添加事件属性来实现。

<button onclick="alert('按钮被点击了')">点击我</button>

原理说明：

• 使用事件属性（如 onclick、onmouseover、onchange 等）直接绑定一个内联的 JavaScript 表达式。
• 当用户与该元素交互时，浏览器会执行属性值对应的代码。

优点：

• 书写简单，适合快速测试或 demo 页面。
• 不需要额外的 JavaScript 文件。

缺点：

• 结构不清晰：HTML 中混入了 JS 逻辑，违背了“结构与行为分离”的原则。
• 不利于维护：代码冗杂且不易管理，尤其是在大型项目中。
• 不支持多个监听器：同一事件只能绑定一个处理函数。

使用建议：

仅适合简单演示或快速开发，不推荐在生产环境中使用。

---

二、DOM 元素对象的事件属性绑定

这种方式将事件绑定逻辑写在 JavaScript 中，保持了 HTML 的整洁。

<button id="myBtn">点击我</button>

<script>
  const btn = document.getElementById('myBtn');
  btn.onclick = function () {
    alert('按钮点击事件触发！');
  };
</script>

原理说明：

• 通过 DOM 操作获取元素对象；
• 直接设置事件属性（如 onclick）为一个函数，事件触发时会执行该函数。

优点：

• HTML 与 JavaScript 分离，代码结构更加清晰；
• 易于调试和管理。

缺点：

• 只能绑定一个事件处理函数：如果对同一事件重复赋值，后一个会覆盖前一个。

btn.onclick = function () {
  alert('第一个处理函数');
};
btn.onclick = function () {
  alert('第二个处理函数'); // 会覆盖前面的绑定
};

使用建议：

相比 HTML 内联方式更优，但由于无法绑定多个处理函数，也不支持事件捕获机制，适合简单项目或学习使用。

---

三、使用 addEventListener 方法绑定

这是现代 JavaScript 中推荐使用的事件绑定方式，功能强大且灵活。

<button id="myBtn">点击我</button>

<script>
  const btn = document.getElementById('myBtn');
  btn.addEventListener('click', function () {
    alert('使用 addEventListener 绑定的事件');
  });
});

原理说明：

• addEventListener 是 DOM 提供的方法，接受三个参数：

  1. 事件类型（如 'click'、'keydown'）；
  2. 事件处理函数；
  3. 可选的布尔值或对象，用于指定事件是否在捕获阶段触发（默认为冒泡阶段）。

element.addEventListener(type, listener, options);

优点：

• 支持多个事件监听器：不会覆盖，多个处理函数可以依次执行。
• 支持事件冒泡与捕获机制；
• 可移除事件监听器（使用 removeEventListener）；
• 语义清晰，便于维护和扩展。

function handler1() {
  alert('处理函数1');
}

function handler2() {
  alert('处理函数2');
}

btn.addEventListener('click', handler1);
btn.addEventListener('click', handler2); // 两者都触发

缺点：

• 写法相对较长，尤其是在绑定多个事件时；
• 必须传入相同的函数引用才能移除事件监听器。

btn.removeEventListener('click', handler1);

使用建议：

addEventListener 是现代前端开发的首选事件绑定方式，推荐在所有正式项目中使用。

---

结语✒️

在实际开发中，推荐优先使用 addEventListener，它提供了最大的灵活性和最好的兼容性，是构建交互性网页的标准做法。