Javascript：绑定事件处理处器-优快云博客

本文通过一个实例详细介绍了如何使用addEventListener方法来为不同的DOM元素绑定事件处理函数，并展示了事件捕获和冒泡两个不同阶段的区别。

objectTarget.addEventListener("eventType",handler,captrueFlag);

该方法为objectTarget绑定事件处理器handler.

第一个参数是事件类型字符串（例如：click keypress）

第二个参数是事件处理函数

第三个参数是监听事件传播的哪个阶段(true 表示监听捕获阶段，false表示监听的冒泡阶段).

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> Javascript DOM事件机制 </title>
</head>
<body>
<div id="test">
	<!-- div元素的子元素：按钮 -->
	<input id="bn" type="button" value="想看结果就点我" />
</div>
<hr />
<div id="results"> </div>
<script type="text/javascript">
	// 事件处理函数
	var click1 = function(event) 
	{
		// 该事件处理函数简单输出事件的当前对象
		document.getElementById("results").innerHTML += 
			"事件捕获阶段: " + event.currentTarget + "<br />";
	}
	// 事件处理函数
	function click2(event) 
	{
		// 该事件处理函数简单输出事件的当前对象
		document.getElementById("results").innerHTML +=
			"事件冒泡阶段：" + event.currentTarget + "<br />";
	}
	// 为bn按钮绑定事件处理函数（捕获阶段）
	document.getElementById("bn")
		.addEventListener("click" , click1 , true); 
	// 为test对象绑定事件处理函数（捕获阶段）
	document.getElementById("test")
		.addEventListener("click" , click1 , true); 
	// 为bn按钮绑定事件处理函数（冒泡阶段）
	document.getElementById("bn")
		.addEventListener("click" , click2 , false); 
	// 为按钮所在的div对象绑定事件处理函数（冒泡阶段）。
	document.getElementById("test")
		.addEventListener("click" , click2 , false);
</script>
</body>
</html>