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

最新推荐文章于 2023-05-23 18:27:43 发布

slongzhang_

最新推荐文章于 2023-05-23 18:27:43 发布

阅读量8.8w

点赞数

分类专栏：前端文章标签：前端js addEventListenner removeEventListener 匿名函数

本文链接：https://blog.csdn.net/qq_35606400/article/details/102513310

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

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>

案例参考慕课网网友’茅侃侃’的问答

slongzhang_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用匿名函数的addEventListener移除事件无效的解决方案

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如使用匿名函数，类似 “document.removeEventListener(“event”, function(){ #code… });” 该事件是无法移除的。但在实际开发中我却更多的...
复制链接

扫一扫