JavaScript事件监听机制

最新推荐文章于 2023-09-15 16:41:08 发布

原创最新推荐文章于 2023-09-15 16:41:08 发布 · 627 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #javascript

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文深入解析JavaScript事件监听机制，包括如何在同一个对象上绑定多个事件监听函数，以及不同浏览器环境下事件监听的兼容性问题，并提供了解决方案。通过实例演示了如何使用addEventListener、attachEvent和封装事件监听函数，确保代码在不同浏览器中都能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学JavaScript时，会用这样的方法监听事件

<html>
	<head>
		<meta charset="utf-8">
		<title>js事件监听机制</title>
	</head>
	<body>
		<input type="button" value="click me!" id="btn-1">
		<script type="text/javascript">
			btn1 = document.getElementById("btn-1");
			btn1.onclick = function(){
				alert("第一次点击按钮");
			}
			btn1.onclick = function(){
				alert("第二次点击按钮");
			}
		</script>
	</body>
</html>

然而和想象中的结果并不相同，当点击按钮时，弹出窗口这样显示

这是因为当同一个对象用.onclick触发多个写法时，后面的方法会把前面的覆盖掉，当事件发生时，只会执行最后的绑定方法，在上面的例子中，后面的方法把前面的覆盖了，所以只出现了一个窗口。

对于这种现象，我们可以用以下的方式来解决

1.addEventListener

语法

target.addEventListener(type, listener, useCapture);

target：文档节点

type：事件名称，不含on，例如click，keydown

listener：调用的函数

useCapture：是否绑定在捕获阶段，默认为falsel

示例代码

<html>
	<head>
		<meta charset="utf-8">
		<title>js事件监听机制</title>
	</head>
	<body>
		<input type="button" value="click me!" id="btn-1">
		<script type="text/javascript">
			function eventFirst(){
					alert("第一次点击按钮");
				}
				function eventSecond(){
					alert("第二次点击按钮");
				}
			window.onload = function(){
				btn1 = document.getElementById("btn-1");
				btn1.addEventListener("click", eventFirst);
				btn1.addEventListener("click", eventSecond);
			}

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

当点击按钮时，出现如下情况

点击确定

依次输出第一个监听事件和第二个监听事件

解除事件绑定

<span style="font-size:18px;">btn1.removeEventListener("click", eventFirst);</span>

这样就解除了第一个监听事件的绑定

当点击按钮时，只输出第二个监听事件

注意：解除事件绑定时一定要用函数的句柄，否则解绑无效

2.attachEvent

IE浏览器使用attachEvent来绑定事件

语法

target.attachEvent(type, listener);

target：文档节点

type:事件名称，带on，比如onclick,onkeydown等等

listener：调用的函数

3.兼容各大主流浏览器的写法

通过以上的实验，最终对函数进行封装

代码如下

<html>
	<head>
		<meta charset="utf-8">
		<title>js事件监听机制</title>
		<style type="text/css">
		#box{
			height:100px;
			width:100px;
			background-color:red;
		}
		</style>
	</head>
	<body>
		<div id="box">
			<input type="button" value="click me!" id="btn-1">
		</div>
		<script type="text/javascript">
			//监听元素事件函数
			function addEventHandler(target, type, func){
				if(target.addEventListener){
					//兼容IE9，Firefox以及Chrome
					target.addEventListener(type, func, false);
				}else if(target.attachEvent){
					//版本较低的IE浏览器
					target.attachEvent("on" + type, func);
				}else{
					target["on" + type] = func;
				}
			}
			//解除事件监听
			function removeEventHandler(target, type, func){
				if(target.removeEventListener){
					target.removeEventListener(type, func, false);
				}else if(target.detachEvent){
					target.detachEvent("on" + type, func);
				}else{
					delete target["on" + type];
				}
			}
			function eventFirst(){
				alert("点击按钮");
			}
			function eventSecond(){
				alert("点击div");
			}
			window.onload = function(){
				btn1 = document.getElementById("btn-1");
				box1 = document.getElementById("box");
				//给按钮添加监听事件
				addEventHandler(btn1, "click", eventFirst);
				//给div添加监听事件
				addEventHandler(box, "click", eventSecond);
				//解除div的监听事件
				removeEventHandler(box, "click", eventSecond);
			}
		</script>
	</body>
</html>