事件的傳播

時間 2019-12-18
原文原文鏈接
事件的傳播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 300px;
                height: 300px;
                background-color: aliceblue;
            }

            #box2 {
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }
            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var box1=document.getElementById("box1");
                var box2=document.getElementById("box2");
                var box3=document.getElementById("box3");
                
                bind(box1,"click",function(){alert("box1")})
                bind(box2,"click",function(){alert("box2")})
                bind(box3,"click",function(){alert("box3")})
                
                // 事件的傳播
                //   - 微軟公司認爲時間應該由內向外傳播，也就是事件觸發時，應該先出發當前元素上的事件
                //      而後再向當前元素的祖先元素上傳播，也就是說事件應該在冒泡階段執行
                //   - 網景公司認爲事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件
                //   - W3C綜合了兩個公司的方案，將事件傳播分紅三個階段
                //      1.捕獲階段
                //      - 在捕獲階段從最外層的祖先元素，向目標元素進行事件的捕獲，可是默認此時不會觸發事件
                //   2.目標階段
                //         - 事件捕獲到目標元素
                //   3.冒泡階段
                //      - 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素
                //   - 若是但願在捕獲階段就觸發事件，能夠將addEventListenter()的第三個參數設置爲true
                //      通常狀況下，咱們不會再捕獲階段觸發事件
            }
            function bind(obj,eventStr,callback){
                if(obj.addEventListener){
                    // 大部分瀏覽器兼容的方式
                    obj.addEventListener(eventStr,callback,false);
                }else{
                    /*
                    this是誰由調用方式決定的
                    callbank.call(obj)
                    */
                    // IE8及如下
                    obj.attachEvent("on"+eventStr,function(){
                        // 在匿名函數中調用回掉函數
                        callback.call(obj);
                    });
                }
            }
        </script>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>

    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。