使用匿名函数的addEventListener移除事件无效的解决方案

谁借莪１个温暖的怀抱￠ 2023-06-06 12:30 12阅读 0赞

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>

案例参考慕课网网友’[茅侃侃][Link 1]’的问答

[Link 1]: http://www.imooc.com/u/6458308/bbs