并非所有的事件都会经过冒泡阶段的

并非所有的事件都会经过冒泡阶段的

所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。(不会向外传递事件。但是仍然会捕获)

 

focus_Bubble:

<!DOCTYPE html>
<html>
<head>
    <style>
        #a {
            width: 500px;
            height: 500px;
            background: #ff0000
        }
        #b {
            width: 200px;
            height: 200px;
            background: #00ff00
        }
    </style>
</head>
<body>
    <div id="a">
        <input id="b" type="text" name="bbbbb">
    </div>
    <hr>
    <input type="text" name="ccc">
</body>
<script>
    //函数
    var fa = function () {
        alert("a");
    }

    var fb = function (event) {
        alert("b");
    }

    //A
    var A = document.getElementById("a");
    A.addEventListener("focus", fa, false);
    //B
    var B = document.getElementById("b");
    B.addEventListener("focus", fb, false);

</script>
</html>

blur_Bubble

<!DOCTYPE html>
<html>
<head>
    <style>
        #a {
            width: 500px;
            height: 500px;
            background: #ff0000
        }
        #b {
            width: 200px;
            height: 200px;
            background: #00ff00
        }
    </style>
</head>
<body>
    <div id="a">
        <input id="b" type="text" name="bbbbb">
    </div>
    <hr>
    <input type="text" name="ccc">
</body>
<script>
    //函数
    var fa = function () {
        alert("a");
    }

    var fb = function (event) {
        alert("b");
    }

    //A
    var A = document.getElementById("a");
    A.addEventListener("blur", fa, false);
    //B
    var B = document.getElementById("b");
    B.addEventListener("blur", fb, false);

</script>
</html>

 

focus_Catch

<!DOCTYPE html>
<html>
<head>
    <style>
        #a {
            width: 500px;
            height: 500px;
            background: #ff0000
        }
        #b {
            width: 200px;
            height: 200px;
            background: #00ff00
        }
    </style>
</head>
<body>
    <div id="a">
        <input id="b" type="text" name="bbbbb">
    </div>
    <hr>
    <input type="text" name="ccc">
</body>
<script>
    //函数
    var fa = function () {
        alert("a");
    }

    var fb = function (event) {
        alert("b");
    }

    //A
    var A = document.getElementById("a");
    A.addEventListener("focus", fa, true);
    //B
    var B = document.getElementById("b");
    B.addEventListener("focus", fb, true);

</script>
</html>

 

blur_Catch

<!DOCTYPE html>
<html>
<head>
    <style>
        #a {
            width: 500px;
            height: 500px;
            background: #ff0000
        }
        #b {
            width: 200px;
            height: 200px;
            background: #00ff00
        }
    </style>
</head>
<body>
    <div id="a">
        <input id="b" type="text" name="bbbbb">
    </div>
    <hr>
    <input type="text" name="ccc">
</body>
<script>
    //函数
    var fa = function () {
        alert("a");
    }

    var fb = function (event) {
        alert("b");
    }

    //A
    var A = document.getElementById("a");
    A.addEventListener("blur", fa, true);
    //B
    var B = document.getElementById("b");
    B.addEventListener("blur", fb, true);

</script>
</html>

 

posted @ 2017-10-16 15:17  sky20080101  阅读(237)  评论(0)    收藏  举报