addEventListener和removeEventListener的用法

addEventListener()用于给指定元素添加事件，可重复添加

removeEventListener()用于移除添加事件

用法

let body = document.body
body.addEventListener("mousedown", function () {
  console.log(1);
})

addEventListener()里有三个参数

一.事件名称（必填）

1.click 单击鼠标左键触发

2.dblclick 双击鼠标左键触发

3.mousedown 单击任意一个鼠标按钮时触发

4.mouseup 松开任意一个鼠标按钮时触发

5.mousemove 鼠标在某个元素上时持续触发

6.mouseover 鼠标移入时触发

7.mouseout  鼠标移除时触发

二.执行函数（必填）

body.addEventListener("mousedown", (e) => {
  console.log(e)
})
body.addEventListener("mousedown", function(e){
  console.log(e)
})

这两种都是可以的

三.触发类型（非必填）

1.true  事件在捕获阶段执行

2.false  事件在冒泡阶段执行，默认是false

重点
如果使用了addEventListener()方法给元素添加事件，想要移除就必须使用removeEventListener()方法，并且第二个执行函数要一样，比如

let body = document.body
let a = () => {
    console.log(1);
}
body.addEventListener("mousedown", a)
setTimeout(() => {
    body.removeEventListener("mousedown", a)
}, 5000)

错误示范

let body = document.body
body.addEventListener("mousedown", function (e) {
    console.log(e);
})
setTimeout(() => {
    body.removeEventListener("mousedown", function (e) {
        console.log(e);
    })
}, 5000)

就是说，我们需要把这个函数给提出来，尽量使用箭头函数