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

一、一个元素绑定多个事件，前面的被后面的覆盖

    <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>

二、为同一个元素绑定多个事件的方法

• 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>

三、元素绑定事件的兼容性代码（为任意元素绑定任意的事件）

    <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>

四、总结绑定事件的区别（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>

五、为元素解绑

• 用什么方式绑定事件，就要用对应的方式解绑事件

• 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(类型，函数，对象)===注：必须使用命名函数

    <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+类型",函数)====注：必须使用命名函数

    <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>

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

• 事件冒泡：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素事件发生了，外面的元素事件自动触发

   <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>

七、为同一个元素绑定多个不同的事件，指向相同的事件处理函数

   <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>

八、事件总结

    <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>