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>