原生js移除事件的兼容性处理

最新推荐文章于 2024-10-07 09:24:46 发布

每一天，每一步

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量92

点赞数

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

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

版权

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 src="js/common.js"></script> -->
	<script>
		// 点击按钮只打印一次
		var btn = document.getElementById('btn');

		// function btnClick() {
		// 	console.log('hello');
		// 	if (btn.removeEventListener) {
		// 		btn.removeEventListener('click', btnClick);
		// 	} else if (btn.detachEvent) {
		// 		btn.detachEvent('onclick', btnClick);
		// 	} else {
		// 		btn.onclick = null;
		// 	}
		// }
		
		// btn.addEventListener('click', btnClick);

		// 改进1

		function btnClick() {
			console.log('hello');
			function removeEventListener(element, type, fn) {
				if (element.removeEventListener) {
					element.removeEventListener(type, btnClick);
				} else if (element.detachEvent) {
					element.detachEvent('on' + type, btnClick);
				} else {
					element['on' + type] = null;
				}
			}
			removeEventListener(btn, 'click', btnClick);  // 调用移除事件兼容性处理函数
		}
		btn.addEventListener('click', btnClick);


		// 改进2 // 调用common.js中注册事件的兼容性处理函数
		// common.js注册事件的兼容性处理
		// function addEventListener(element, type, fn) {
		// 	if (element.addEventListener) {
		// 		element.addEventListener(type, fn);  // 第三个参数默认是false
		// 	} else if (element.attachEvent) {
		// 		element.attachEvent('on' + type, fn);
		// 	} else {
		// 		element['on' + type] = fn;
		// 	}
		// }
		
		// addEventListener(btn, 'click', btnClick);
	</script>
</body>
</html>