Javascript之DOM2事件綁定

    咱們使用DOM2事件綁定，實際上是讓綁定元素經過原型鏈一直找到EventTarget內置類原型生的addEventListener方式實現的

    DOM0事件綁定：只能給一個元素的某一個行爲綁定一次方法，第二次綁定的會把前面的覆蓋掉

    好比：box.omclick = function(){

        console.log(111)

    }

        box.onclick = function(){

            console.log(222)

        }

    輸出結果：222

    DOM2時間綁定：

    優點1：能夠給某一個元素的同一個行爲綁定多個不一樣的方法，不會被覆蓋掉

    box.addEventListener("click", function(e){

        console.log(11)

    },false);  //true:在捕獲階段；false:冒泡階段

    

    box.addEventListener("click", function(e){

        console.log(22)

    },false);

    輸出結果： 11  22

    優點2：DOM0中的行爲類型，咱們用DOM2同樣能夠綁定，並且DOM2中還提供了一些DOM0沒有的行爲類型 -> DOMContentLoaded：當頁面中的DOM結構(HTML結構加載完成)觸發的行爲

    document.addElentListener("DOMContentLoaded", function(e){}, false)  // 當DOM結構加載完成

    window.onload = function(){} -> 當頁面中的全部資源都加載完成(圖片，HTML，css，音視頻)纔會執行後面的函數；而且在一個頁面中只能用一次，後面再寫會把前面的覆蓋掉；由於它是DOM0事件綁定，因此只能綁定一次；

    jQuery：$(document).ready(function(){}) -> $(function(){}); //只要當頁面中的HTML結構加載完成就會執行對應的函數，而且在同一個頁面中能夠出現屢次；

    // -> DOM2事件綁定

    //-> 而且綁定的行爲是DOM2中新增長的那個DOMContentLoaded；

    window.addEventListener("load", function(){}, false);   //能夠綁定屢次

    三、DOM2

    box.addEventListener("click", function(){

        console.log(this); //this -> box

    }, false)

    // 移除的時候須要保證三個參數，行爲，方法，哪一個階段發生 一點都不能差，在DOM2綁定的時候，咱們通常都給他綁定的是實名函數；

    box.removeEventListener("click", function(e){

        console.log(this); //this -> box

    }, false);

    //四、只能給某個元素的同一個行爲綁定多個"不一樣"的方法(若是方法相同了，就只能留一個)

        當行爲觸發，會按照綁定的前後順序依次把綁定的方法執行

        執行的方法中的this是當前被綁定事件的元素自己

        function fn1(){console.log(1)};

        function fn1(){console.log(2)};

        function fn1(){console.log(3)};

        function fn1(){console.log(4)};

        function fn1(){console.log(5)};

        box.addEventListener("click", fn1, false);

         box.addEventListener("click", fn2, false);

         box.addEventListener("click", fn3, false);

         box.addEventListener("click", fn4, false);

         box.addEventListener("click", fn5, false);

        輸出結果： 1 2 3 4 5

    //在IE6~8瀏覽器中，不支持addEventListener和removeEventListener，若是想使用此事件方法，就只能用attachEvent和detachEvent；

    //只有兩個參數，不能像addEventListener方法那樣能夠控制在那個階段發生，默認只能在冒泡階段發生，行爲須要添加"on"(和DOM0特別的相似)，可是DOM0只能綁定一個行爲方法，而它能夠綁定多個行爲方法，可是執行順序是亂的

    box.attachEvent("onclick", fn1);  

此方法和標準的瀏覽器的事件池機制的區別

    一、順序問題：執行的時候順序是混亂的，標準瀏覽器是按照綁定順序依次執行的

    二、重複問題：IE6~8中能夠給同一個元素的同一個行爲綁定多個相同的方法

    三、this問題：IE6~8中當方法執行的時候，方法中的this不是當前元素box，而是window

    //事件池：是用來存儲當前元素行爲綁定的方法(瀏覽器自帶的)