核心提示:1、addEventListener()主流浏览器addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener() 方法来移除 addEventL...
1、addEventListener()主流浏览器
addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
element.addEventListener(event, function, useCapture),event为事件名不要使用on。
使用addEventListener()添加多个事件时不会发生覆盖。
var element=document.getElementById("id");
element.onclick=function(){
alert(1);
}
element.onclick=function(){
alert(2);
}
如上会发生覆盖,不会发生alert(1)。
2、element.addEventListener(event, function, useCapture)
1、useCapture捕获形式,默认false事件句柄在冒泡阶段执行,true事件句柄在捕获阶段执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>addEventListener</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#parent{
background-color: red;width: 200px;height: 200px;overflow: hidden;
}
#child{
background-color: black;width: 100px;height: 100px;margin: 50px;
}
</style>
<body>
<p id="parent">
<p id="child"></p>
</p>
<script type="text/javascript">
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
},false)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
},false)
</script>
</body>
</html>

如上,如果点击child(black),则先alert child然后alert parent。但是如果只点击红色时,则只会alert parent。
如果将useCapture改为true,那么点击黑色时则先alert parent然后alert child。但是如果只点击红色时,则只会alert parent。
3、 target.attachEvent(eventNameWithOn, function)(IE6-8)
事件名伴随On(eventNameWithOn)监听的事件名以on前置,类似一个属性的管理者,譬如当你使用onclick时能够监听你的click事件。element.attachEvent("onclick", function);


