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)
就是说,我们需要把这个函数给提出来,尽量使用箭头函数