js添加与移除事件

Posted 2021-09-28 echeverra

添加事件

一般我们给dom元素添加事件的方法：

var dom = document.getElementById("xxx")
dom.onclick=method

但是如果给一个dom添加多个绑定事件呢？

dom.onclick=method1
dom.onclick=method2
dom.onclick=method3

如果这样写，会发现只有method3生效，这时候就不能使用onclick了，而是使用attachEvent和addEventListener。

attachEvent

在IE浏览器中，添加事件使用attachEvent方法

dom.attachEvent("onclick",method1);
dom.attachEvent("onclick",method2);
dom.attachEvent("onclick",method3);

需要注意的是，事件需加上前缀on，如onclick onsubmit onchange，执行顺序method3 > method2 > method1，无力吐槽的IE...

addEventListener

在除IE外的其他浏览器都支持W3C标准的addEventListener方法

dom.addEventListener("click",method1,false);
dom.addEventListener("click",method2,false);
dom.addEventListener("click",method3,false);

执行顺序method1 > method2 > method3，第三个参数指定事件是否在捕获或冒泡阶段执行， 默认false：事件在冒泡（从子级到父级）阶段执行，true：事件在捕获（从父级到子级）阶段执行

移除事件

removeEventListener

addEventListener对应移除事件removeEventListener，删除注册事件需两个方法参数相同。

dom.removeEventListener("click",method1,false);

detachEvent

attachEvent对应移除事件detachEvent，删除注册事件需两个方法参数相同。

dom.attachEvent("onclick",method1);

参考文章：

https://www.cnblogs.com/leihe...
https://blog.csdn.net/weixin_...