原生js事件处理函数addEventListener、attachEvent兼容性处理

最新推荐文章于 2024-02-17 12:37:41 发布

每一天，每一步

最新推荐文章于 2024-02-17 12:37:41 发布

阅读量203

点赞数

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

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

版权

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 = my$('btn');
		console.dir(btn);
		console.dir(btn.addEventListener);
		// 第1种：
		// if (btn.addEventListener) {
		// 	btn.addEventListener('click', function () {
		// 		console.log('hello');
		// 	});
		// } else if (btn.attachEvent) {
		// 	btn.attachEvent('onclick', function () {
		// 		console.log('hello');
		// 	});
		// } else {
		// 	btn.onclick = function () {
		// 		console.log('hello');
		// 	};
		// }


		// 第2种：
		// if (btn.addEventListener) {
		// 	btn.addEventListener('click', addEventListener);
		// } else if (btn.attachEvent) {
		// 	btn.attachEvent('onclick', addEventListener);
		// } else {
		// 	btn.onclick = addEventListener;
		// }

		// // 事件处理函数
		// function addEventListener() {
		// 	console.log('hello');
		// }


		// 第3种：
		addEventListener(btn, 'click', function () {
			console.log('hello');
		});
		addEventListener(btn, 'click', function () {
			console.log('hello world');
		});
		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;
			}
		}

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

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js事件处理函数addEventListener、attachEvent兼容性处理

<!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> &lt.
复制链接

扫一扫

专栏目录