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

    //事件池：是用来存储当前元素行为绑定的方法(浏览器自带的)