main page

javascript事件传播

addEventListener

第三的参数，默认为false;

如何设置false，则是冒泡（起泡）阶段中触发相应注册函数

如何设置true，则是捕获阶段中触发相应注册函数(个人理解)

在 2 级 DOM 中，事件传播分为三个阶段：

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

 

event.stopPropagation()，该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。

（个人理解：捕获和冒泡都没有了）

<html>
<head>
<script type="text/javascript" src="tmp.js"></script>
<style type="text/css">
#d1{
    width:300;
    height:300;
    background-color:black;
    margin:0px auto;
}
#d2{
    width:200;
    height:200;
    background-color:green;
    margin:0px auto;
}
#d3{
    width:100;
    height:100;
    background-color:red;
    margin:0px auto;
}
</style>
</head>

<body>
<div id="d1">
    <div id="d2">
        <div id="d3"></div>
    </div>
</div>
<p id="p1"></p>

</body>
</html>
View Code

tmp.js

window.onload=enableBubble;
var pcontext="";
function enableBubble(){
    document.getElementById("d1").addEventListener("click",logSomeThing);
    document.getElementById("d2").addEventListener("click",logSomeThing);
    document.getElementById("d3").addEventListener("click",logSomeThing);
    pcontext=document.getElementById("p1");
}

function logSomeThing(e){
    //e.stopPropagation();
    pcontext.innerHTML=pcontext.innerHTML+"<br/>"+e.currentTarget.id+"---"+e.target.id;
}
View Code

 

posted @ 2013-07-19 17:05  weipan  阅读(185)  评论(0)    收藏  举报