事件的冒泡

407指導員發表於2020-11-09
事件

事件的冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的冒泡</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        #s1 {
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             *事件的冒泡（bubble）
             *  -所謂冒泡就是事件的向上傳導 ，當後代元素上的事件被觸發
             *其祖先的相同事件也同樣會被觸發，注意是相同事件
             *  -點一下span也同時點了一下div,也點了一下body，
             *  -同時觸發了三個單擊響應函式
             *  -開發中大部分冒泡是有用的，如果不希望發生冒泡可以通過事件來取消冒泡
             *
             */
            //為s1繫結單擊響應函式
            let s1 = document.getElementById("s1");
            s1.onclick = function (event) {
                event = event || window.event;
                alert("我是你爹！");
                //取消冒泡
                //可以將事件的cancelBubble設定為true，則取消冒泡
                event.cancelBubble = true;
            };
            //為box1繫結單擊響應函式
            let box1 = document.getElementById("box1");
            box1.onclick = function (event) {
                event = event || window.event;
                alert("我是你爺爺！");
                event.cancelBubble = true;
            };
            //為body繫結一個單擊響應函式
            document.body.onclick = function () {
              alert("我是你祖宗！");
            };
        };
    </script>
</head>
<body>
<div id="box1">
    我是box1
    <span id="s1">我是span</span>
</div>
</body>
</html>

在這裡插入圖片描述

注意點：

1.所謂冒泡就是事件的向上傳導 ，當後代元素上的事件被觸f發時，其祖先的相同事件也同樣會被觸發，注意是相同事件。

2.可以將事件的cancelBubble設定為true，則取消冒泡。

  1. event = event || window.event;相容性問題。

相關文章