如何使用addEventListener添加事件

留学资讯2024-04-09 14:10:01admin3

在之前的一篇经验中介绍了使用attchEvent和detachEvent添加、注销事件;

火狐和其他浏览器都不支持,幸运的是他们都支持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:

测试addEventListener

测试removeEventListener

-------------------------------------------------------------------------------

再将上面的例子改一下:

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:

测试addEventListener

测试removeEventListener

现象:页面打开之后,点击【测试addEventListener】,依次弹出111,222,333

说明,使用addEventListener添加事件后按照绑定顺序执行

再点击【测试removeEventListener】,则会发现不再弹“111”,即test1事件被注销

相关推荐

猜你喜欢

大家正在看

换一换