DOM绑定事件处理器

左手的ㄟ右手 2022-05-12 00:44 218阅读 0赞

**一 介绍**

DOM提供了一种事件绑定机制，它提供的事件绑定方法是addEventListener(event, function, useCapture)，该方法三个参数

event：必需。描述事件名称的字符串。注意：不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。

function:必需。描述了事件触发后执行的函数。当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认。事件句柄在冒泡阶段执行。

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> DOM事件机制 </title>
    </head>
    <body>
    
    <div id="test">
    	
    	<input id="testbn" type="button" value="单击我" />
    </div>
    <hr />
    <div id="results"> </div>
    <script type="text/javascript">
    	// 事件处理函数
    	var gotClick1 = function(event) 
    	{
    		// 该事件处理函数简单输出事件的当前对象
    		document.getElementById("results").innerHTML += 
    			"事件捕获阶段: " + event.currentTarget + "<br />";
    	}
    	// 事件处理函数
    	function gotClick2(event) 
    	{
    		// 该事件处理函数简单输出事件的当前对象
    		document.getElementById("results").innerHTML +=
    			"事件冒泡阶段：" + event.currentTarget + "<br />";
    	}
    	// 为testbn按钮绑定事件处理函数（捕获阶段）
    	document.getElementById("testbn")
    		.addEventListener("click" , gotClick1 , true); 
    	// 为test对象绑定事件处理函数（捕获阶段）
    	document.getElementById("test")
    		.addEventListener("click" , gotClick1 , true); 
    	// 为testbn按钮绑定事件处理函数（冒泡阶段）
    	document.getElementById("testbn")
    		.addEventListener("click" , gotClick2 , false); 
    	// 为按钮所在的div对象绑定事件处理函数（冒泡阶段）。
    	document.getElementById("test")
    		.addEventListener("click" , gotClick2 , false);
    </script>
    </body>
    </html>

** **

**三 运行结果**

![8c2e08c6-6bc6-31b2-a4db-7f0ea4030caf.png][]

[8c2e08c6-6bc6-31b2-a4db-7f0ea4030caf.png]: /images/20220512/8e9fd42be52d444ea6d738f7a67ee32f.png