标准事件模型终止冒泡方法
addEventListener的三个参数,第一个是事件,鼠标点击移动之类的,第二个是参数传递,函数名.bind(this,x,y)之类的,第三个是传递方向,bool型的ture或false,默认false是冒泡方向,由最内层传递到最外层,这种传递可以用event.stopPropagation();阻止冒泡方向的传递,但是true的捕获方向是不能被阻止,也没有什么办法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="width: 600px; height: 600px;border: 1px solid red;" id="div1" align="center">
<div style="width: 400px; height: 400px;border: 1px solid blue;margin-top: 100px;" id="div2">
<div style="width: 200px; height: 200px;border: 1px solid black;margin-top: 100px;" id="div3">
</div>
</div>
</div>
</body>
<script>
window.onload=function()
{
var divarray=document.getElementsByTagName("div");
for(i=0;i<divarray.length;i++)
{
divarray[i].addEventListener("click",f1.bind(this,divarray[i]));
}
}
function f1(obj)
{
alert(obj.id);
event.stopPropagation();
}
</script>
</html>