綁定事件和解綁事件的方法

一、on事件的綁定與解綁

    <input type="button" value="點擊顯示" id="btn">
    <input type="button" value="解綁" id="clear">
    <script>
        myId("btn").onclick=function(){
            alert("小狗最可愛！");
        }
        myId("clear").onclick=function(){
            myId("btn").onclick=null;
        }
    </script>

　　解綁：對象.on事件名字=null

 

二、對象.addEventListener("事件類型",事件處理函數,事件處理階段(true或false))

　　谷歌和火狐支持,IE8不支持

    <input type="button" value="點擊顯示" id="btn">
    <input type="button" value="解綁" id="clear">
    <script>
        // 多個事件了不能調用同一個函數
        myId("btn").addEventListener("click",f1,false);
        myId("btn").addEventListener("click",f2,false);
        function f1(){
            console.log("明月幾時有");
        }
        function f2(){
            console.log("把酒問青天");
        }
        // 同時解綁（移除）多個事件
        myId("clear").onclick=function(){
            myId("btn").removeEventListener("click",f1,false);
            myId("btn").removeEventListener("click",f2,false);
        }
    </script>

　　解綁：對象.removeEventListener("沒有on的事件類型",函數,false);

 

三、對象.attachEvent("有on的事件類型",事件處理函數)

　　谷歌、火狐不支持,IE8支持

    <input type="button" value="點擊顯示" id="btn">
    <input type="button" value="解綁" id="clear">
    <script>
        // 多個事件了不能調用同一個函數
        myId("btn").attachEvent("onclick",f1);
        myId("btn").attachEvent("onclick",f2);
        function f1(){
            console.log("明月幾時有");
        }
        function f2(){
            console.log("把酒問青天");
        }
        // 同時解綁（移除）多個事件
        myId("clear").onclick=function(){
            myId("btn").detachEvent("onclick",f1);
            myId("btn").detachEvent("onclick",f2);
        }
    </script>

　　解綁：對象.detachEvent("on事件類型",函數名字)

 

---

 

 

綁定事件兼容代碼

function addEventListener(element, 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(element, type, fn) {
    if (element.removeEventListener) {
        element.removeEventListener(type, fn, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, fn);
    } else {
        element["on" + type] = null;
    };
};

    <input type="button" value="點擊顯示" id="btn">
    <input type="button" value="解綁" id="clear">
    <script>
        // 事件函數
        function f1(){
            console.log("明月幾時有");
        }
        function f2(){
            console.log("把酒問青天");
        }
        // 元素綁定事件兼容代碼
        function addEventListener(element,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(element,type,fn){
            if(element.removeEventListener){
                element.removeEventListener(type,fn,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,fn);
            }else{
                element["on"+type]=null;
            }
        };
        addEventListener(myId("btn"),"click",f1);
        addEventListener(myId("btn"),"click",f2);
        myId("clear").onclick=function(){
            removeEventListener(myId("btn"),"click",f1);
        }
    </script>