删除事件(解绑事件)
传统注册方式:element.onclick = 'null'removeEventListener删除事件attachEvent删除事件
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.
querySelectorAll("div");
divs[0].onclick = function () {
alert(11
);
//传统方式删除事件
divs[0].onclick =
"null"; //弹出一次对话框后就解绑
};
//2.removeEventListener删除事件
divs[1].
addEventListener("click",
fn()); //里面的fn 不需要调用加小括号
//解绑
function fn() {
alert(22
);
divs[1].
removeEventListener("click", fn
);
}
//3.attachEvent删除事件
divs[2].
attachEvent("onclick", fn1
);
//解绑
function fn1() {
alert(33
);
divs[2].
detachEvent("onclick", fn1
);
}
删除事件兼容性解决方案
// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.
removeEventListener(eventName, fn
);
} else if (element.detachEvent) {
element.
detachEvent('on' + eventName, fn
);
} else {
element[
'on' + eventName] = null
;
}
}