事件（綁定、解綁、冒泡）

時間 2019-11-11

原文原文鏈接

1、一個元素綁定多個事件，前面的被後面的覆蓋

    <input type="button" value="點擊" id="btn">
    <script>
        document.getElementById("btn").onclick=function(){
            console.log("哈哈1");
        };
        document.getElementById("btn").onclick=function(){
            console.log("哈哈2");
        };
        document.getElementById("btn").onclick=function(){
            console.log("哈哈3");
        };
        //最後的點擊效果是控制檯輸出"哈哈3"
    </script>

2、爲同一個元素綁定多個事件的方法

addEventListener( "不帶on事件類型", 事件處理函數 , false)---------谷歌和火狐支持,IE8不支持

    <input type="button" value="點擊" id="btn">
    <script>
        //第一種方法:addEventListener(a,b,c)-----abc三個參數
        //參數a:事件的類型-----事件的名字,沒有on
        //參數b:事件處理函數-----命名函數和匿名函數均可以
        //參數c:布爾類型,目前寫false
        document.getElementById("btn").addEventListener("click",function(){
            console.log("哈哈1");
        },false);
        document.getElementById("btn").addEventListener("click",function(){
            console.log("哈哈2");
        },false);
        document.getElementById("btn").addEventListener("click",function(){
            console.log("哈哈3");
        },false);
        //最後控制檯輸出結果:哈哈1   哈哈2  哈哈3------谷歌火狐中，IE8不支持
    </script>

attachEvent( "有on的時間類型", 事件處理函數 )-------------------------谷歌和火狐不支持,IE8支持

    <input type="button" value="點擊" id="btn">
    <script>
        //第二種方法:attachEvent(a,b) 兩個參數
        //參數a:事件類型------事件名字有on
        //參數b:事件處理函數-----命名函數或者匿名函數
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log("哈哈1");
        });
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log("哈哈2");
        });
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log("哈哈3");
        });
        //最後控制檯輸出結果:哈哈1   哈哈2  哈哈3-----IE8中,火狐谷歌不支持
    </script>

3、元素綁定事件的兼容性代碼（爲任意元素綁定任意的事件）

    <script>
    //爲任意元素，綁定任意的事件，任意的元素，任意的類型，任意的事件處理函數
        function addEventListener(element,type,fn){
            //瀏覽器是否支持這個方法
            if(elelment.addEventListener){//谷歌火狐支持
                element.addEventListener(type,fn,false);
            }else if(element.attachEvent){//IE8支持
                elelment.attachEvent("on"+type,fn);
            }else{//普通的方法，注意type自己是帶引號的，訪問屬性方法既可使用點語法，能夠用中括號
                elelment["on"+type]=fn;
            }
        }
    </script>

4、總結綁定事件的區別（addEventListener和attachEvent）

相同點：均可覺得元素綁定事件
不一樣點1：方法名
不一樣點2：參數個數
不一樣點3：瀏覽器支持
不一樣點4：參數type有無帶on
不一樣點5：this表明的含意

    <input type="button" value="點擊" id="btn">
    <script>
        document.getElementById("btn").addEventListener("click",function(){
            console.log(this);//火狐谷歌中輸出的是對象 "btn"
        },false);
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log(this);//IE8中輸出window
        });
    </script>

5、爲元素解綁

用什麼方式綁定事件，就要用對應的方式解綁事件瀏覽器
1.對象.on+事件名字的方式綁定綁定事件------>解綁用：對象.on+事件名字=null;函數

   <input type="button" value="綁定" id="btn1">
    <input type="button" value="解綁" id="btn2">
    <script>
        document.getElementById("btn1").onclick=function(){
            console.log("哈哈");
        };
        document.getElementById("btn2").onclick=function(){
            document.getElementById("btn1").onclick=null;
        };
    </script>

2.對象.addEventListener("類型",函數,布爾)----->解綁：對象.removeEventListener(類型，函數，對象)===注：必須使用命名函數this

    <input type="button" value="綁定" id="btn1">
    <input type="button" value="解綁" id="btn2">
    <script>
        document.getElementById("btn1").addEventListener("click",f1,false);
        document.getElementById("btn1").addEventListener("click",f2,false);
        document.getElementById("btn2").onclick=function(){
            document.getElementById("btn1").removeEventListener("click",f1,false);
        }
        function f1(){
            console.log("哈哈1");
        }
        function f2(){
            console.log("哈哈2");
        }
    </script>

3.對象.attachEvent("on+類型",函數)---->解綁: 對象.detachEvent("on+類型",函數)====注：必須使用命名函數spa

    <input type="button" value="綁定" id="btn1">
    <input type="button" value="解綁" id="btn2">
    <script>
        document.getElementById("btn1").attachEvent("onclick",f1);
        document.getElementById("btn1").attachEvent("onclick",f2);
        document.getElementById("btn2").onclick=function(){
            document.getElementById("btn1").detachEvent("onclick",f1);
        };
        function f1(){
            console.log("哈哈1");
        }
        function f2(){
            console.log("哈哈2");
        }
    </script>

元素解綁事件的兼容性代碼（對比上面的元素綁定事件的兼容性代碼）

   <script>
    //爲任意的一個元素,解綁對應的事件
        function removeEventListener(element,type,fnName){
            if(element.removeEventListener){
                element.removeEventListener(type,fnName,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,fnName);
            }else{
                element["on"+type]=null;
            }
        }
    </script>

6、事件冒泡和阻止事件冒泡

事件冒泡：多個元素嵌套，有層次關係，這些元素都註冊了相同的事件，若是裏面的元素事件發生了，外面的元素事件自動觸發

   <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>
    <!-- 三個大中小盒子,已設置不一樣寬高 大盒子dv1,中盒子dv2,小盒子dv3-->
    <script>
        document.getElementById("dv1").onclick=function(){
            console.log(this.id);
        };
        document.getElementById("dv2").onclick=function(){
            console.log(this.id);
        };
        document.getElementById("dv3").onclick=function(){
            console.log(this.id);
        };
        //點擊大盒子dv1------->輸出:dv1
        //點擊中盒子dv2------->輸出:dv2  dv1
        //點擊小盒子dv3------->輸出:dv3  dv2   dv1
    </script>

阻止事件冒泡：window.event.cancelBubble=true和e.stopPropagation();

    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>
    <!-- 三個大中小盒子,已設置不一樣寬高 大盒子dv1,中盒子dv2,小盒子dv3-->
    <script>
        document.getElementById("dv1").onclick=function(){
            console.log(this.id);
        };
        document.getElementById("dv2").onclick=function(){
            console.log(this.id);
            window.event.cancelBubble=true;//是個屬性,谷歌和IE支持
        };
        document.getElementById("dv3").onclick=function(e){
            console.log(this.id);
            e.stopPropagation();//是個方法,谷歌火狐支持
            console.log(e);//e是事件處理函數對象,輸出結果是一個對象
        };
        //點擊大盒子dv1------->輸出:dv1
        //點擊中盒子dv2------->輸出:dv2
        //點擊小盒子dv3------->輸出:dv3
    </script>

7、爲同一個元素綁定多個不一樣的事件，指向相同的事件處理函數

   <input type="button" value="點擊" id="btn">
    <script>
        document.getElementById("btn").onclick=f1;
        document.getElementById("btn").onmouseover=f1;
        document.getElementById("btn").onmouseout=f1;
        function f1(event){
            switch(event.type){
                case "click":
                alert("點擊事件");
                break;
                case "mouseover":
                this.style.backgroundColor="red";
                break;
                case "mouseout":
                this.style.backgroundColor="yellow";
                break;
            }
        }
    </script>

8、事件總結

    <script>
    /*爲元素綁定事件
    *addEventListener("沒有on的事件類型",事件處理函數,控制事件階段的布爾類型值)
    *事件觸發的過程當中,可能會出現事件冒泡的效果,爲了阻止事件冒泡
    *window.event.cancelBubble=true---->谷歌,IE8支持,火狐不支持
    *其中window.event就是事件參數對象,是IE中的標準
    *e.stopPropagation()---->谷歌和火狐支持
    *其中e是火狐的標準,也是事件參數對象
    *事件參數對象e在ie8中不存在,因此用window.event代替
    *addEventListener的第三個參數是控制事件階段的
    *事件的階段有三個:
    *經過e.eventPhase這個屬性能夠知道當前這個事件是什麼階段的
    *若是屬性的值是1----->事件捕獲階段(從外到裏)----第三個參數值是true
    *若是屬性的值是2----->事件目標階段
    *若是屬性的值是3----->事件冒泡階段(從裏到外)-----第三個參數值是false
    *事件通常都是捕獲階段和目標階段結合,或者冒泡階段和目標階段結合,不會出現捕獲階段和冒泡階段結合
    *通常默認是冒泡階段,不多用捕獲階段/
    </script>