版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
目录：
一、解绑事件的3种方式：
注意：用什么方式绑定事件，就应该用对应的方式解绑事件。
基础html代码如下：
<body>
<input type="button" value="触发事件" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
</body>
1.
对象.on事件名字 =事件处理函数-------绑定事件方法
对象.on事件名字 = null;-------------------解绑事件方法
document.getElementById("btn1").onclick = function () {
console.log("触发事件");
};
document.getElementById("btn2").onclick = function () {
//解绑事件
document.getElementById("btn1").onclick = null;
};
2.
(谷歌火狐支持,IE8不支持)
对象.addEventListener(“没有on的事件类型”,命名函数,false);------------绑定事件方法
对象.removeEventListener(“没有on的事件类型”,函数名字,false);-------解绑事件方法
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
//为按钮btn1绑定多个事件
document.getElementById("btn1").addEventListener("click", f1, false);
document.getElementById("btn1").addEventListener("click", f2, false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
document.getElementById("btn2").onclick = function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
document.getElementById("btn1").removeEventListener("click", f1, false);
};
3.
对象.attachEvent(“on事件类型”,命名函数);------------绑定事件方法
对象.detachEvent(“on事件类型”,函数名字);-----------解绑事件方法
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
document.getElementById("btn1").attachEvent("onclick", f1);
document.getElementById("btn1").attachEvent("onclick", f2);
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").detachEvent("onclick", f1);
};
二、解绑事件的兼容代码：
//为任意的一个元素,解绑对应的事件
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fnName);
} else {
element["on" + type] = null;
}
}
三、总结：
1.在进行绑定事件的时候，我们应该要注意用什么方式绑定事件，就应该用对应的方式进行解绑事件。
2.不同的解绑方式，在不同的浏览器可能没有效果，应该尽量使用兼容代码。
相关推荐：
js原生实现为元素绑定事件兼容代码