HTML DOM addEventListener() 方法

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	可选。 布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值： true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行

使用 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);
}