Javascript——元素的绑定与解绑

EventTarget：一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。
Element，document和window是最常见的事件目标，但是其他对象也可以是事件目标，比如XMLHttpRequest，AudioNode，AudioContext等等。

方法：
EventTarget.addEventListener()：在EventTarget上注册特定事件类型的事件处理程序。
EventTarget.removeEventListener()：EventTarget中删除事件侦听器。
EventTarget.dispatchEvent()：将事件分派到此EventTarget。

绑定事件的区别：
addEventListener();
attachEvent()

相同点：都可以为元素绑定事件
不同点：
1.方法名不一样
2.参数个数不一样：
addEventListner三个参数，attachEvent两个参数
3.addEventListener 谷歌，火狐，IE11支持，IE8不支持
attachEvent 谷歌火狐不支持，IE11不支持，IE8支持
4.this不同，addEventListener中的this是当前绑定事件的对象
attachEvent中的this是window
5.addEventListener中事件的类型（事件名字）没有on；attachEvent中事件类型（事件名字）有on

解绑事件：
用什么方式绑定事件，就应该用对应的方式解绑事件
1.解绑事件
对象.on事件名字-事件处理函数——绑定事件
对象.on事件名字=null;
2.解绑事件
对象.addEventListener(“没有on的事件类型”，命名函数，false);——绑定事件
对象.removeEventListener(“没有on的事件类型”，函数名字，false);
3.解绑事件
对象.attachEvent(“on事件类型”，命名函数);——绑定事件
对象.detachEvent(“on事件类型”，函数名字);

绑定事件的兼容

    function addEventListener(elemnt,type,fn){
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,fn);
        }else{
            element["on"+type]=fn;
        }
    }

解绑事件的兼容：
为任意一个元素，解绑对应的事件

    function removeEventListener(elemnt,type,fn){
        if(element.removeEventListener){
            element.removeEventListener(type,fn,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,fnName);
        }else{
            element["on"+type]=null;
        }
    }

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

<input type="button" value="显示效果" id="btn" />
<script src="common.js"></script>
<script>
    //为同一个元素绑定多个不同事件，指向相同的事件处理函数
    my$("btn").onclick=f1;
    my$("btn").onmouseover=f1;
    my$("btn").onmouseout=f1;
    function f1(e){
        switch(e.type){
            case "click":
                alert("Mayday");
                break;
            case "mouseover":
                this.style.backgroundColor="red";
                break;
            case "mouseout":
                this.style.backgroundColor="green";
                break;
        }
    }
</script>