原生js移除事件处理的3种方式

最新推荐文章于 2023-04-11 17:30:43 发布

每一天，每一步

最新推荐文章于 2023-04-11 17:30:43 发布

阅读量2.6k

点赞数

分类专栏： javaScript 文章标签： js javascript dom

本文链接：https://blog.csdn.net/u010234868/article/details/118250740

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="按钮" id="btn">
	<script>
		// 点击按钮只打印一次
		var btn = document.getElementById('btn');

		// 第1种：
		// btn.onclick = function () {
		// 	console.log('hello');
		// 	btn.onclick = null;
		// }

		// 第2种： 
		// btn.addEventListener('click', function () {
		// 	console.log('hello');
		// 	btn.removeEventListener('click', function () { // 错误的  此处无法调用上一行的匿名函数 无法移除
		// 		console.log('hello'); 
		// 	});
		// });  

		// 第3种，改进：
		function btnClick() {
			console.log('hello');
			btn.removeEventListener('click', btnClick);
		}
		btn.addEventListener('click', btnClick);

		// 第4种： detachEvent IE6-10
		// function btnClick() {
		// 	console.log('hello');
		// 	btn.detachEvent('onclick', btnClick);
		// }
		// btn.attachEvent('onclick', btnClick); // btn.attachEvent is not a function

	</script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js移除事件处理的3种方式

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="按钮" id="btn"> <script> // 点击按钮只打印一次 var btn = document.ge.
复制链接

扫一扫

专栏目录