javascript
js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )
JS用addEventListener添加事件監聽方法后,可以用removeEventListener來解除監聽:
element.removeEventListener(event, myFunction)
注意:兼容:?IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,對于這類瀏覽器版本可以使用 detachEvent() 方法來移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流瀏覽器,除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
注意:解除綁定事件的時候一定要用函數的句柄,把整個函數寫上是無法解除綁定的。
錯誤寫法:
btn.addEventListener("click",function(){
alert(11);
});
btn.removeEventListener("click",function(){
alert(11);
});
正確寫法:
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
總結:對函數進行封裝后的監聽事件如下,兼容各大主流瀏覽器。
/*
* addEventListener:監聽Dom元素的事件
*
* target:監聽對象
* type:監聽函數類型,如click,mouseover
* func:監聽函數
*/
function addEventHandler(target,type,func){
if(target.addEventListener){
//監聽IE9,谷歌和火狐
target.addEventListener(type, func, false);
}else if(target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
/*
* removeEventHandler:移除Dom元素的事件
*
* target:監聽對象
* type:監聽函數類型,如click,mouseover
* func:監聽函數
*/
function removeEventHandler(target, type, func) {
if (target.removeEventListener){
//監聽IE9,谷歌和火狐
target.removeEventListener(type, func, false);
} else if (target.detachEvent){
target.detachEvent("on" + type, func);
}else {
delete target["on" + type];
}
}
var eventOne = function(){
alert("第一個監聽事件");
}
function eventTwo(){
alert("第二個監聽事件");
}
window.onload = function(){
var bindEventBtn = document.getElementById("bindEvent");
//監聽eventOne事件
addEventHandler(bindEventBtn,"click",eventOne);
//監聽eventTwo事件
addEventHandler(bindEventBtn,"click",eventTwo );
//監聽本身的事件
addEventHandler(bindEventBtn,"click",function(){
alert("第三個監聽事件");
});
//取消第一個監聽事件
removeEventHandler(bindEventBtn,"click",eventOne);
//取消第二個監聽事件
removeEventHandler(bindEventBtn,"click",eventTwo);
}
更多前端知識請瀏覽前端園地其它文章^_^!
總結
以上是生活随笔為你收集整理的js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux未知设备驱动程序,未知Andr
- 下一篇: html广告悬浮窗口,JS实现悬浮移动窗