removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。
如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如使用匿名函数,类似 “document.removeEventListener(“event”, function(){ #code… });” 该事件是无法移除的。
但在实际开发中我却更多的需要是匿名函数,下面附上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript监听</title>
</head>
<body>
<button id="btn">alert</button>
<button id="cancel">移除</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
var cancel = document.getElementById('cancel');
const listenBySL = function(element, type, handler, capture = false){
if(element.addEventListener){
// W3C内核
element.addEventListener(type, handler, capture);
}else{
// IE内核
element.attachEvent('on'+type, handler, capture);
}
return {"remove":function(){
if(element.removeEventListener){
// W3C内核
element.removeEventListener(type, handler, capture);
}else{
// IE内核
element.detachEvent('on'+type, handler, capture);
}
}}
}
// 添加监听
var addAlert = listenBySL(btn,'click',function(){
alert(123);
});
listenBySL(cancel,'click',function(){
// 移除监听
addAlert.remove();
alert('移除成功');
});
</script>
</body>
</html>
案例参考慕课网网友’茅侃侃’的问答
更多推荐
使用匿名函数的addEventListener移除事件无效的解决方案
发布评论