JavaScript中的事件冒泡机制

事件冒泡机制　　

事件冒泡发生的条件：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

　　举个例子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script src="demo2.js"></script>
</head>
<body>
    <div id = "first" style="padding : 20px;background-color: #ff0;width: 150px;">
        <div id="second" style="background-color :#f00;width:100px;height:100px;border :1px dashed #000"></div>
    </div>
</body>
</html>
//demo2.js
window.onload = setupEvents;

function setupEvents(){
    document.getElementById("first").onmousedown=function(){
        alert("first element event");
    }
    
    document.getElementById("second").onmousedown=function(){
        alert("second element event");
    }
    
    document.onmousedown=function(){
        alert("document event");
    }
}

如果单击最里面的div元素，不论在什么浏览器中将弹出三个警告窗口，依次显示：

1.Second element event

2.First element event

3.Document event

取消事件冒泡机制

　　如果你有一个元素堆栈，且只希望一个元素触发该事件处理程序，可以取消事件冒泡机制。IE中的属性：cancelBubble，Mozila中的属性：stopPropagation。代码如下：

function stopEvent(evnt){
    if(evnt.stopPropagation){
        evnt.stopPropagation();
    }else{
     evnt.cancelBubble = ture;
    }
}

 

现在修改demo2.js中的first id的js代码：

//demo2.js
window.onload = setupEvents;

function setupEvents(){
//    document.getElementById("first").onmousedown=function(){
//        alert("first element event");
//    }
//    
    document.getElementById("first").onmousedown=function(evnt){
    var theEvent = evnt ? evnt :window.event;
    alert("first element event");
    stopEvent(theEvent);
    }

    
    document.getElementById("second").onmousedown=function(){
        alert("second element event");
    }
    
    document.onmousedown=function(){
        alert("document event");
    }
}

function stopEvent(evnt){
    if(evnt.stopPropagation){
        evnt.stopPropagation();
    }else{
     evnt.cancelBubble = ture;
    }
}

然后试验，你会发现最后一个针对文档事件处理程序的警告窗口将不会影响，因为在时间到达栈顶之前，事件已经取消了。

 

 

posted @ 2014-04-10 11:39  肥磊  阅读(3020)  评论(0)  编辑  收藏  举报