JavaScript中的事件冒泡机制

最新推荐文章于 2022-03-10 15:34:55 发布

weixin_30258027

最新推荐文章于 2022-03-10 15:34:55 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/134feilei/p/3656110.html

版权

事件冒泡机制　　

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

　　举个例子：

<!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").οnmοusedοwn=function(){
        alert("first element event");
    }
    
    document.getElementById("second").οnmοusedοwn=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").οnmοusedοwn=function(){
//        alert("first element event");
//    }
//    
    document.getElementById("first").οnmοusedοwn=function(evnt){
    var theEvent = evnt ? evnt :window.event;
    alert("first element event");
    stopEvent(theEvent);
    }

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

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

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

转载于:https://www.cnblogs.com/134feilei/p/3656110.html

weixin_30258027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的事件冒泡机制

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

扫一扫