js中事件三阶段

先贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡</title>
    <style>
        #a{
            width: 300px;
            height:300px;
            background-color: cadetblue;
        }
        #b{
            width: 200px;
            height:200px;
            background-color: chocolate;
        }
        #c{
            width: 100px;
            height:100px;
            background-color: coral;
        }
    </style>
</head>
<body>
<div id="a">
    <div id="b">
        <div id="c"></div>
    </div>
</div>
<script src="mainx.js"></script>
</body>
</html>

html

/**
 * Created by Administrator on 2016/8/10.
 */
(function () {
    
    var a=document.getElementById("a");
    var b=document.getElementById("b");
    var c=document.getElementById("c");
    
    a.addEventListener("click",function () {
       console.log("a is clicked"); 
    });
    b.addEventListener("click",function () {
       console.log("b is clicked"); 
    });
    c.addEventListener("click",function () {
       console.log("c is clicked"); 
    });
    
})();

运行结果如图：

当点击最小块c的时候，a和b也会被点击。也就导致了所谓的冒泡。

当js代码修改为

/**
 * Created by Administrator on 2016/8/10.
 */
(function () {

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");

    a.addEventListener("click", function () {
        console.log("a is clicked");
    });
    b.addEventListener("click", function () {
        console.log("b is clicked");
    });
    c.addEventListener("click", function (event) {
        console.log("c is clicked");
        event.stopPropagation();
    });

})();

结果为：

当点击c后，只有c被点击

stopPropagation()方法会阻止冒泡行为。

当代码再次修改为：

/**
 * Created by Administrator on 2016/8/10.
 */
(function () {

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");

    a.addEventListener("click", function () {
        console.log("a is clicked");
    });
    b.addEventListener("click", function () {
        console.log("b is clicked");
    });
    c.addEventListener("click", function (event) {
        console.log("c is clicked");
        event.stopPropagation();
    });
    c.addEventListener("click",function () {
       console.log("c1 is clicked");
    });
})();

结果为：

当点击C的时候，两个事件都会触发。

在修改代码为：

/**
 * Created by Administrator on 2016/8/10.
 */
(function () {

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");

    a.addEventListener("click", function () {
        console.log("a is clicked");
    });
    b.addEventListener("click", function () {
        console.log("b is clicked");
    });
    c.addEventListener("click", function (event) {
        console.log("c is clicked");
        event.stopPropagation();
        event.stopImmediatePropagation();
    });
    c.addEventListener("click", function (event) {
        console.log("c1 is clicked");
    });
})();

结果为：

又变为只触发一个事件了。

stopImmediatePropagation()方法，只阻止父类，不阻止兄弟事件。（这里写错了，他也阻止了兄弟事件！！！！！！！！！！！！！！！！！！！！！！！！（剁手））

冒泡告一段落

开始讲三个阶段：

事件的三个阶段：捕获，目标，冒泡。

捕获阶段：从外到内，监听中设置为true,子类事件不产生

目标阶段：点击的目标

冒泡阶段：从内到外

先贴代码：

/**
 * Created by Administrator on 2016/8/10.
 */
(function () {

    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");

    a.addEventListener("click", function () {
        console.log("冒泡阶段的a is clicked");
    });
    b.addEventListener("click", function () {
        console.log("冒泡阶段的b is clicked");
    });
    // c.addEventListener("click", function (event) {
    //     console.log("c is clicked");
    //     // event.stopPropagation();
    //     event.stopImmediatePropagation();
    // });
    c.addEventListener("click", function (event) {
        console.log("目标阶段的c is clicked");
    });
    b.addEventListener("click",function (event) {
        console.log("捕获阶段的b is clicked");
    },true);
    a.addEventListener("click",function () {
       console.log("捕获阶段的a is clicked");
    },true);
})();

执行结果为：

执行顺序如图：先捕获，后目标，在冒泡。也可理解为，从外到内，在从内到外。

另外，可以用event.eventPhase去测试是什么阶段，

捕获阶段，返回值为1

目标阶段，返回值为2

冒泡阶段，返回值为3

自己的理解：

　　用法，还没用到，以后补充(⊙﹏⊙)b；

　　阻止冒泡的好处，防止子元素的父类元素被点击而触发子类事件。

　　设置捕获的好处（设置，末尾true属性），可以是冒泡事件反向执行。

补充一点2016-10-28 11:08:55（感谢 "潘多拉之欣" 的提醒）

关于stopImmediatePropagation和stopPropagation的区别

网上大神的解释

posted @ 2016-08-10 19:47 晨落梦公子阅读(3976) 评论(3) 编辑收藏举报

晨落梦公子

js中事件三阶段

公告