如何使用addEventListener添加事件

Posted 2023-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用addEventListener添加事件相关的知识，希望对你有一定的参考价值。

火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的：
addEventListener和removeEventListener方法

形如：element.addEventListener(type,listener,useCapture);//添加事件
element.removeEventListener(type,listener,useCapture);//注销事件
这里需要和attchEvent相区别，event直接写事件名即可，如click事件->object.addEventListener("click",listener,useCapture);

例：
JS：
window.onload = function()
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",test1,false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function()
btn1.removeEventListener("click",test1,false);
,false);

function test1()
alert("111");

--------------------------------------------
html：
<button id="btn1">测试addEventListener</button>
<button id="btn2">测试removeEventListener</button>

-------------------------------------------------------------------------------
再将上面的例子改一下：
JS：
window.onload = function()
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",test1,false);
btn1.addEventListener("click",test2,false);
btn1.addEventListener("click",test3,false);

var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function()
btn1.removeEventListener("click",test1,false);
,false);

function test1()
alert("111");

function test2()
alert("222");

function test3()
alert("333");

HTML：
<button id="btn1">测试addEventListener</button>
<button id="btn2">测试removeEventListener</button>

现象：页面打开之后，点击【测试addEventListener】，依次弹出"111","222","333"
说明，使用addEventListener添加事件后按照绑定顺序执行
再点击【测试removeEventListener】，则会发现不再弹“111”，即test1事件被注销参考技术A 按照添加顺序相反的顺序触发; addEventListener是给非ie添加事件处理程序，接收三个参数，第一个是事件名，不需要加“on”

addEventListener和attachEvent以及element.onclick的区别

attachEvent是ie添加事件处理程序，接收两个参数，其中事件类型名称要加"on"，

可以添加多个事件处理程序，按照添加顺序相反的顺序触发;

addEventListener是给非ie添加事件处理程序，接收三个参数，第一个是事件名，不需要加“on”，

第二个是绑定的函数，第三个参数是一个布尔值，是事件的方式，意思是是否使用useCatch方式，

如果是false，就使用传统的冒泡方式，如果为true，就在捕获阶段调用事件处理程序。

addEventListener可以添加多个事件处理程序，按照添加顺序触发

二者有个本质上的区别，attachEvent的事件处理程序会在全局作用域中运行，this等于window对象，

而addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行的，this等于绑定元素对象。

既然他们的this指向不同，那怎么才能实现相同的this指向呢？

如果想要实现this关键字指向相同的话，要用Function的apply或者call方法。示例代码如下：

function bind(el, fn, type){
        var _fn = function(){
                fn.apply(el, arguments);
        };
        window.addEventListener ? el.addEventListener(type, _fn, false) : el.attachEvent("on" + type, _fn);
}

即用el来代替_fn里的this。（方法待测试）

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addEventListener和attachEvent测试</title>
</head>
<body>
    <input type="button" value="test" id="btn_test">
</body>
<script>
var btn_test = document.getElementById(\'btn_test\');
function attachEvt(obj,ev,fn){
    if(obj.attachEvent){
        obj.attachEvent(\'on\'+ev,fn);
    }else{
        obj.addEventListener(ev,fn,false);
    }
}
attachEvt(btn_test,\'click\',function(){
    alert(this);
})
</script>
</html>

ff弹出如图：

ie弹出如图：

el.onclick和addEventListener和attachEvent有什么区别呢？
本质的区别是el.onclick相当于在标签上写onclick，用addEventListener和attachEvent是通过DOM接口去绑定事件。

一个html文档的解析是有顺序的，先解析标签项，再解析DOM项，el.onclick事实上相当于写在标签上，

通过标签的onclick属性输入到文档，然后由文档解析成事件的。而后者，要在文档解析完成以后，

通过文档的dom接口去绑定的事件，虽然结果是一样的，都是click事件，但是过程是不同的。

通过这三种方式绑定的事件，怎么取消呢？

el.onclick：el.onclick=null;这样就可以取消绑定在el上的事件处理程序了。

通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除，并且移除时传入的参数与添加

处理程序时使用的参数相同。通过addEventListener()添加的匿名函数将无法移除。

通过attachEvent()添加的事件处理程序要通过detachEvent()来移除，其他的情况和addEventListener()一样。

如果都想在事件函数里面获取event对象，怎么获取呢？

这要分浏览器，IE和非IE的事件对象不同。兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论指定事件

处理程序时使用什么方法，都会传入event对象。

el.onclick=function(event){
　　alert(event.type);           //"click"
};
el.addEventListener("click",function(event){
　　alert(el.type);               //"click"
},false);

通过HTML标签属性指定的事件处理程序时，变量event中保存着event对象。

<input type="button" value="Click me" onclick="alert(event.type)"/>   //"click"

在IE中，要访问event对象有几种不同的方式：

通过el.onclick绑定的事件处理程序中，event对象作为window对象的一个属性存在。

el.onclick=function(){
　　var event=window.event;
　　alert(event.type);              //"click"
}

如果通过attachEvent()添加事件处理程序时，event对象作为参数被传入事件处理程序，

el.attachEvent("onclick",function(event){
　　alert(event.type);                 //"click"
});

通过HTML标签属性指定的事件处理程序时，变量event中保存着event对象。这点和非IE一样。

综上，跨浏览器的事件对象获取方法是： return event?event:window.event;

转自：http://www.cnblogs.com/kakemei/p/3290655.html

以上是关于如何使用addEventListener添加事件的主要内容，如果未能解决你的问题，请参考以下文章

addEventListener和attachEvent以及element.onclick的区别

事件综述

js添加事件和移除事件:addEventListener()与removeEventListener()

绑定事件 addEventListener

js中addEventListener如何取消

使用addeventlistener为js动态创建的元素添加事件监听