從零開始學 Web 之 DOM（七）事件冒泡

時間 2019-11-17

標籤開始 web dom 事件冒泡欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公衆號：Web前端之巔
博客園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！javascript

1、事件冒泡

一、什麼是事件冒泡？

事件冒泡：當有多個元素嵌套，而且這些元素綁定了相同的事件，這時候若是裏面的元素事件觸發了，那麼外面的事件會自動觸發。html

示例：前端

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

    <script src="common.js"></script>
    <script>
        my$("dv1").onclick = function() {
            console.log(this.id);
        }
        my$("dv2").onclick = function() {
            console.log(this.id);
        }
        my$("dv3").onclick = function() {
            console.log(this.id);
        }
    </script>
</body>

二、阻止事件冒泡

2.一、方式一

window.event.cancelBubble = true;java

注意： Chrome,IE8 支持，firefox 不支持git

2.二、方式二

在事件處理函數中傳一個參數 e，而後調用 e.stopPropagation();github

注意：Chrome,firefox 支持， IE8 不支持。數組

window.event 和 e 都是事件處理參數對象，一個是 IE 標準，一個是 firefox 標準。服務器

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

    <script src="common.js"></script>
    <script>
        my$("dv1").onclick = function() {
            console.log(this.id);
        }
        my$("dv2").onclick = function() {
            console.log(this.id);
            window.event.cancelBubble = true;
        }
        my$("dv3").onclick = function(e) {
            console.log(this.id);
            e.stopPropagation();
        }
    </script>
</body>

這時候能夠寫兼容代碼的，因爲用到 window ，可是沒學到 BOM，因此先不寫。微信

三、事件的三個階段

事件捕獲階段（從外向內） ===> 階段 1
事件目標階段（最開始觸發事件的目標）===> 階段 2
事件冒泡階段（從裏向外） ===> 階段 3

經過事件處理參數對象 e.eventPhase 屬性能夠查看當前事件所處的階段。app

若爲1：捕獲階段

若爲2：目標階段

若爲3：冒泡階段
addEventListener 綁定事件處理方法中第三個參數：控制事件的階段

true: 控制事件爲捕獲階段

false: 控制事件爲冒泡階段
通常默認使用冒泡階段，不多使用捕獲階段。

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

    <script src="common.js"></script>
    <script>
        my$("dv1").addEventListener("click", function(e) {
            console.log(this.id +" --- "+ e.eventPhase);
        }, false);
        my$("dv2").addEventListener("click", function(e) {
            console.log(this.id +" --- "+ e.eventPhase);
        }, false);
        my$("dv3").addEventListener("click", function(e) {
            console.log(this.id +" --- "+ e.eventPhase);
        }, false);
      
// -------------------------------------------------------
// addEventListener 的第三個參數爲 false
// 點擊最裏面的 dv3
//dv3 --- 2 : 由於是冒泡階段，從裏向外，從 dv3開始，dv3是目標，因此爲2
//dv2 --- 3：冒泡階段，因此爲3
//dv1 --- 3：冒泡階段，因此爲3

// 若是將 false 都改成 true 的話：
// 點擊最裏面的 dv3
//dv1 --- 1：捕獲階段，從外向裏，從dv1開始捕獲，因此dv1爲1
//dv2 --- 1：捕獲階段，從外向裏
//dv3 --- 2：捕獲階段，從外向裏，到達dv3目標，隨意dv3爲目標階段。

    </script>
</body>

2、小案例

目的：爲同一個元素綁定多個不一樣的事件指向相同的事件處理函數。

<body>
    <input type="button" value="按鈕" id="btn" >

    <script src="common.js"></script>
    <script>
        my$("btn").onclick = func;
        my$("btn").onmouseover = func;
        my$("btn").onmouseout = func;
        
        function func(e) {
            switch(e.type) {
                case "click" :
                    console.log("onclick");
                    break;
                case "mouseover" :
                    console.log("onmouseover");
                    break;
                case "mouseout" :
                    console.log("onmouseout");
                    break;
                default:
                    break;
            }
        }
    </script>
</body>

使用事件處理參數對象的 type 屬性能夠判斷事件觸發時候，事件的類型，從而作出相應的事件處理。

3、百度搜索小項目

目標：在搜索框輸入關鍵字，自動在搜索框下方顯示相關內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #dv1 {
            width: 500px;
            margin-top: 100px;
            margin-left: 200px;
            font: 400 18px/30px "Microsoft Yahei";
            color: #595959;
        }

        input {
            width: 500px;
            height: 30px;
        }

        .dvv {
            width: 500px;
            /*height: 10px;*/
            border: 1px solid green;
        }

        .ps {
            padding: 2px 0 2px 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="dv1">
    <input type="text" placeholder="日向雛田" id="txt">
</div>

<script src="common.js"></script>
<script>
    var KeyWords = [
        "旋渦鳴人", "旋渦辛久奈", "旋風小子", "旋風少女",
        "日向雛田", "日向花火", "日向本家",
        "奈良鹿丸", "奈良大佐",
        "旗木卡卡西"
    ];

    my$("txt").onkeyup = function () {
        while(my$("dv2")) {
            my$("dv1").removeChild(my$("dv2"));
        }
        // console.log(this.value);
        var findArr = []; // 每次輸入文字的時候都先清除臨時數組
        for (var i = 0; i < KeyWords.length; i++) {
            if (KeyWords[i].indexOf(this.value) === 0) {
                // console.log("yes");
                findArr.push(KeyWords[i]);
            }
        }
        // 文本框輸入了內容，而且臨時數組不爲空
        if ((findArr.length !== 0) && (this.value.length !== 0)) {

            var dvObj = document.createElement("div");
            dvObj.className = "dvv";
            dvObj.id = "dv2";
            my$("dv1").appendChild(dvObj);

            for (var i = 0; i < findArr.length; i++) {
                var pObj = document.createElement("p");
                pObj.className = "ps";
                setInnerText(pObj, findArr[i]);
                my$("dv2").appendChild(pObj);

                pObj.onmouseover = f1; // 循環裏面不要使用匿名函數
                pObj.onmouseout = f2;

            }
        }
    };

    function f1() {
        this.style.backgroundColor = "greenyellow";
    }
    function f2() {
        this.style.backgroundColor = "";
    }
</script>
</body>
</html>

一、這裏的候選數據原本應該來自服務器，這裏用數組來模擬。
二、這裏使用的是鼠標輸入文字後的鼠標擡起事件：onkeyup。
三、須要準備個臨時數組存儲於文本框輸入文字匹配的字符串。
四、當搜索框的文本爲空或者臨時數組的內容爲空時，循環刪除下拉列表。
五、之因此輸入多個文字，可是隻建立了一個下拉列表的緣由是由於在輸入第二個文字的時候，先輸入的實際上是字母，這個時候不匹配，而咱們在每次鼠標擡起的時候會清空臨時數組，因此這個時候會先刪除下拉列表，當咱們輸入第二個文字的時候，再從新建立相匹配的下拉列表。
六、每次進入鼠標擡起按鍵時，若是有下拉列表就循環刪除。
七、注意在循環裏面不要使用匿名函數。