addEventListener() 方法的作用:在文档中添加点击事件。
document.addEventListener() 方法:用于向文档添加事件句柄。
//在文档中添加点击事件
document.addEventListener("click", (e)=>{
document.getElementById("demo").innerHTML = "Hello";
console.log(e);
});
//可以通过函数名来引用外部函数
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello";
}
//可以在文档中添加多个事件,添加的事件不会覆盖已存在的事件
document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);
//可以在文档中添加不同类型的事件
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
语法
document.addEventListener(event, function, useCapture)
参数 | 描述 |
event | 必需。 描述事件名称的字符串。 不要使用 "on" 前缀。例如,使用 "click" 来取代 "onclick"。 |
function | 必需。 描述事件触发后执行的函数。 当事件触发时,事件对象会作为第一个参数传入函数。 |
useCapture | 可选。 布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值:
|
使用 removeEventListener() 方法移除通过 addEventListener() 方法添加的事件句柄:
//向文档添加事件句柄
document.addEventListener("mousemove", myFunction);
//移除文档的事件句柄
document.removeEventListener("mousemove", myFunction);
如果浏览器不支持 addEventListener() 方法, 可以使用 attachEvent() 方法替代。
if (document.addEventListener) { //所有主流浏览器,除了 IE 8 及更早 IE版本
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // IE 8 及更早 IE 版本
document.attachEvent("onclick", myFunction);
}