首页 > 建站教程 > JS、jQ、TS >  js addEventListener()添加事件详解正文

js addEventListener()添加事件详解

定义：

    在javascript中，可以通过addEventListener()方法，给对象添加事件句柄。但是早期浏览器，如IE8及其更低版本不兼容，可以使用attachEvent()方法来解决。下面，先看下addEventListener()的兼容性截图：

addEventListener兼容性
addEventListener兼容性

实例：

    给button按钮添加点击事件: 
document.getElementsByTagName("button")[0].addEventListener("click", function(){
    console.log("我爱模板网");
});

语法格式： 
element.addEventListener(event, function, useCapture)

参数详解：

参数 描述
event 必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:       true - 事件句柄在捕获阶段执行
      false- 默认值，事件句柄在冒泡阶段执行


其他用法：

    1、addEventListener为同一节点重复添加事件，后面不会覆盖前面： 
document.getElementById("btn").addEventListener("click", fn1);
document.getElementById("btn").addEventListener("click", fn2);
    2、addEventListener为同一节点添加多个事件： 
document.getElementById("myBtn").addEventListener("mouseover", fn1);
document.getElementById("myBtn").addEventListener("click", fn2);
document.getElementById("myBtn").addEventListener("mouseout", fn3);
    3、使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄: 
// 添加 <div> 事件句柄
document.getElementById("myDIV").addEventListener("mousemove", fn);
// 移除 <div> 事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", fn);
    4、如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。 
var btn = document.getElementById("myBtn");
if (btn.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    btn.addEventListener("click", fn);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    btn.attachEvent("onclick", fn);
}

TAGS: addEventListener