JS用addEventListener添加事件監(jiān)聽(tīng)方法后，可以用removeEventListener來(lái)解除監(jiān)聽(tīng)：

element.removeEventListener(event, myFunction)

注意：兼容：?IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，對(duì)于這類瀏覽器版本可以使用 detachEvent() 方法來(lái)移除事件句柄:

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);

}

注意：解除綁定事件的時(shí)候一定要用函數(shù)的句柄，把整個(gè)函數(shù)寫(xiě)上是無(wú)法解除綁定的。

錯(cuò)誤寫(xiě)法:

btn.addEventListener("click",function(){

alert(11);

});

btn.removeEventListener("click",function(){

alert(11);

});

正確寫(xiě)法：

btn.addEventListener("click",eventTwo);

btn.removeEventListener("click",eventOne);

總結(jié)：對(duì)函數(shù)進(jìn)行封裝后的監(jiān)聽(tīng)事件如下，兼容各大主流瀏覽器。

/*

* addEventListener:監(jiān)聽(tīng)Dom元素的事件

*

* target：監(jiān)聽(tīng)對(duì)象

* type：監(jiān)聽(tīng)函數(shù)類型，如click,mouseover

* func：監(jiān)聽(tīng)函數(shù)

*/

function addEventHandler(target,type,func){

if(target.addEventListener){

//監(jiān)聽(tīng)I(yíng)E9，谷歌和火狐

target.addEventListener(type, func, false);

}else if(target.attachEvent){

target.attachEvent("on" + type, func);

}else{

target["on" + type] = func;

}

}

/*

* removeEventHandler:移除Dom元素的事件

*

* target：監(jiān)聽(tīng)對(duì)象

* type：監(jiān)聽(tīng)函數(shù)類型，如click,mouseover

* func：監(jiān)聽(tīng)函數(shù)

*/

function removeEventHandler(target, type, func) {

if (target.removeEventListener){

//監(jiān)聽(tīng)I(yíng)E9，谷歌和火狐

target.removeEventListener(type, func, false);

} else if (target.detachEvent){

target.detachEvent("on" + type, func);

}else {

delete target["on" + type];

}

}

var eventOne = function(){

alert("第一個(gè)監(jiān)聽(tīng)事件");

}

function eventTwo(){

alert("第二個(gè)監(jiān)聽(tīng)事件");

}

window.onload = function(){

var bindEventBtn = document.getElementById("bindEvent");

//監(jiān)聽(tīng)eventOne事件

addEventHandler(bindEventBtn,"click",eventOne);

//監(jiān)聽(tīng)eventTwo事件

addEventHandler(bindEventBtn,"click",eventTwo );

//監(jiān)聽(tīng)本身的事件

addEventHandler(bindEventBtn,"click",function(){

alert("第三個(gè)監(jiān)聽(tīng)事件");

});

//取消第一個(gè)監(jiān)聽(tīng)事件

removeEventHandler(bindEventBtn,"click",eventOne);

//取消第二個(gè)監(jiān)聽(tīng)事件

removeEventHandler(bindEventBtn,"click",eventTwo);

}

更多前端知識(shí)請(qǐng)瀏覽前端園地其它文章^_^！

總結(jié)

以上是生活随笔為你收集整理的js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。