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

Posted 2021-01-15 dawnwill

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

 

2、对象.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);

 

3、对象.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>