el-table click事件多次触发_JavaScript从零开始——DOM事件编程（1）

事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始，我们一起看看 DOM 的事件编程。

---

1 概念

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

该接口主要提供三个实例方法：

• addEventListener：绑定事件的监听函数
• removeEventListener：移除事件的监听函数
• dispatchEvent：触发事件

2 EventTarget.addEventListener()

EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值：

target.addEventListener(type, listener[, useCapture]);

该方法接受三个参数：

• type：事件名称，大小写敏感。
• listener：监听函数。事件发生时，会调用该监听函数。
• useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（后面的章节会涉及到），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。

下面是一个例子：

function hello() {
    
  console.log('Hello world');
}

let btn = document.getElementById('btn');
btn.addEventListener('click', hello, false);

上面代码中，btn节点的addEventListener方法绑定click事件的监听函数hello，该函数只在冒泡阶段触发。

关于参数，有两个地方需要注意。

首先，第二个参数除了监听函数，还可以是一个具有handleEvent方法的对象：

buttonElement.addEventListener('click', {
    
  handleEvent: function (event) {
    
    console.log('click');
  }
});

上面代码中，addEventListener方法的第二个参数，就是一个具有handleEvent方法的对象。

其次，第三个参数除了布尔值useCapture，还可以是一个属性配置对象。该对象有以下属性。

• capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
• once：布尔值，表示监听函数是否只触发一次，然后就自动移除。
• passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器将忽略这个要求，并在监控台输出一行警告。

如果希望事件监听函数只执行一次，可以打开属性配置对象的once属性：

element.addEventListener('click', function (event) {
    
  // 只执行一次的代码
}, {
    once: true});

addEventListener方法可以为针对当前对象的同一个事件，添加多个不同的监听函数。这些函数按照添加顺序触发，即先添加先触发。如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener方法手动去除）。

使用如下HTML：