js 事件处理（addEventListener() 、removeEventListener()）

可以直接在html标签中添加事件

例如：

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

还可以为相关的节点元素添加一个特定的类名或id，以便于为该元素添加事件。可以通过on+事件名称为元素添加事件监听。

 var element = document.getElementById('a');   
 
 element.onclick = handleClick;  
  
 function handleClick(){}; 

通过这样的方式 给id为a 的标签添加上来点事件 handleClick（）

取消事件

element.onclick = null;

2.addEventListener()

将指定的事件监听添加到元素上，当该事件上触发相应的事件时，会执行该事件监听函数。

var element = document.getElementById('a')
element.addEventListener("click", function () {
    //填写方法操作
})

可以通过这样的方式绑定事件

而且可以绑定不止一个事件

var element = document.getElementById('a')
element.addEventListener("click", function () {
    //填写方法操作1

})
element.addEventListener("click", function () {
    //填写方法操作2

})
element.addEventListener("click", function () {
    //填写方法操作3

})

这样会执行方法 1 2 3

有三个可选参数

capture
once
passive

capture接收一个布尔值，表示handle会在该类型的事件捕获阶段传播到该EventTarget时触发，true表示事件在捕获阶段执行，false表示事件在冒泡阶段执行，默认为false。

once接收一个布尔值，表示handle是否最多只调用一次，如果是true，handle会在其被调用之后自动移除，为false时则在其被调用之后不会移除，默认为false。

passive接收一个布尔值，表示handle是否忽略掉preventDefault()，默认为false，表示不忽略。如果为true，handle仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
 

element.addEventListener("click", function () {
   //方法具体内容
}, { once: false })

3.removeEventListener()

来删除使用addEventListener()方法添加的事件监听。

如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除，两者不会互相影响。移除一次 并没有完全移除。