JavaScript事件监听机制

た入场券 2022-08-18 11:57 278阅读 0赞

初学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>

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

![Center][]

这是因为当同一个对象用.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>

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

![Center 1][]

点击确定

![Center 2][]

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

解除事件绑定

<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>

[Center]: /images/20220731/ea0eebd7eab64796af8b3164c29d79f1.png
[Center 1]: /images/20220731/931a2e353a6f4c019e0383cca2cb702a.png
[Center 2]: /images/20220731/c9b0467a144e460ba57564d6462b7f62.png