为按钮绑定多个 onclick 事件

问题

如何使用原生 JavaScript 为一个按钮绑定多个 onclick 事件？

解答

使用 addEventListener 方法可以为同一个元素绑定多个事件处理函数，它们会按照绑定顺序依次执行。

var btn = document.getElementById("btn");

btn.addEventListener("click", hello1);
btn.addEventListener("click", hello2);

function hello1() {
  alert("hello 1");
}

function hello2() {
  alert("hello 2");
}

点击按钮后，会先弹出 “hello 1”，然后弹出 “hello 2”。

关键点

• addEventListener 可以为同一元素的同一事件绑定多个处理函数
• 多个事件处理函数会按照绑定顺序依次执行
• 不要使用 onclick 属性赋值方式，它会覆盖之前的事件处理函数
• 使用 removeEventListener 可以移除指定的事件处理函数