JavaScript中的两种事件流

时间：2016-12-07 09:46:30 阅读：387 评论：0 收藏：0 [点我收藏+]

标签：ima har log opp white span document 接收 alert

JavaScript中的两种事件流

　　事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。

第一部分：事件冒泡

　　即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

　　下面举一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubble</title>
    <style>
        button{
            background: red;
            color:white;
        }
        #third{
            width: 50px;
            height: 50px;
            border:thin solid red;
        }
        #second{
            width: 100px;
            height: 100px;
            border:thin solid red;
        }
        #first{
            width:200px;
            height: 200px;
            border:thin solid red;
        }
    </style>
</head>
<body>
    <div id="first">
        <div id="second" >
            <div id="third" >
                <button id="button">事件冒泡</button>
            </div>
        </div>
    </div>
    <script>

        document.getElementById("button").addEventListener("click",function(){
            alert("button");
        },false);

        document.getElementById("third").addEventListener("click",function(){
            alert("third");
        },false);

        document.getElementById("second").addEventListener("click",function(){
            alert("second");
        },false);        

        document.getElementById("first").addEventListener("click",function(){
            alert("first");
        },false);

    </script>
</body>
</html>

这时，我们只点击button元素，效果如下：

技术分享

可以看到，虽然我们只点击了button元素，但是，button外的third、second、first上的事件由内向外以此被触发，触发的顺序是由DOM树的下层到DOM树的最上面，故称为冒泡。

（说明：尽管这里我使用了DOM2级事件处理程序，并设置每个事件为冒泡阶段发生，但是即使使用DOM0级，得到的结果也是这样的，冒泡是默认的）

但是如果我们不希望事件冒泡呢？那么如何阻止事件冒泡？

实际上，事件的对象有一个stopPropagation()方法可以阻止事件冒泡，我们只需要把上个例子中button的事件处理程序修改如下：

        document.getElementById("button").addEventListener("click",function(event){
            alert("button");
            event.stopPropagation();    
        },false);

这样，点击button后，只会弹出一个弹窗，显示button.

注意：现代所有的浏览器都支持事件冒泡，只是在实现上有一些差别。

第二部分：事件捕获

　　事件捕获和事件冒泡是刚好相反的，事件捕获是指不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件。举例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubble</title>
    <style>
        button{
            background: red;
            color:white;
        }
        #third{
            width: 50px;
            height: 50px;
            border:thin solid red;
        }
        #second{
            width: 100px;
            height: 100px;
            border:thin solid red;
        }
        #first{
            width:200px;
            height: 200px;
            border:thin solid red;
        }
    </style>
</head>
<body>
    <div id="first">
        <div id="second" >
            <div id="third" >
                <button id="button">事件冒泡</button>
            </div>
        </div>
    </div>
    <script>

        document.getElementById("button").addEventListener("click",function(){
            alert("button");
        },true);

        document.getElementById("third").addEventListener("click",function(){
            alert("third");
        },true);

        document.getElementById("second").addEventListener("click",function(){
            alert("second");
        },true);        

        document.getElementById("first").addEventListener("click",function(){
            alert("first");
        },true);

    </script>
</body>
</html>