解绑事件

标签：input   click   UNC   函数   false   attach   pre   lse   cti   

<input type="button" value="点击" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="commer.js"></script>
    <!--解绑事件-->
    <!--注意：用什么方式绑定事件，就应该用对应的方式解绑事件-->
    <!--1：解绑事件-->
    <!--对象.on事件名字=事件处理函数&#45;&#45;&#45;&#45;》绑定事件-->
    <!--对象.on事件名字=null;-->
    <!--2:解绑事件-->
    <!--对象.addEventListener("没有on的事件类型"，命名函数，false);-&#45;&#45;&ndash;&gt;绑定事件-->
    <!--对象.removeEventListener("没有on的事件类型"，函数名字，false);-->
    <!--3:解绑事件-->
    <!--对象.attachEvent("on事件类型"，命名函数);-&#45;&#45;&ndash;&gt;绑定事件-->
    <!--对象.detachEvent("on事件类型"，函数名字);-->

<script>
    //对象.on事件名字=事件处理函数----绑定事件
    // ver("btn").onclick=function () {
    //   console.log("今天天气不错！");
    // };
    // ver("btn2").onclick=function () {
    //   //解绑事件
    //     ver("btn").onclick=null;
    // };
</script>


<!--2-->
<script>
    // function f1(){
    //     console.log("第一个")
    // }
    // function f2(){
    //     console.log("第二个")
    // }
    // ver("btn").addEventListener("click",f1,false);
    // ver("btn").addEventListener("click",f2,false);
    // //点击第二个按钮把第一个按钮的第一个点击事件解绑
    // ver("btn2").onclick=function () {
    //   //绑定事件的时候，需要在绑定事件的时候使用 命名函数
    //     ver("btn").removeEventListener("click",f1,false)
    // };
</script>


<!--3-->
<script>
    // function f1(){
    //     console.log("第一个")
    // }
    // function f2(){
    //     console.log("第二个")
    // }
    // ver("btn").attachEvent("onclick",f1);
    // ver("btn").attachEvent("onclick",f2);
    // ver("btn2").onclick=function () {
    //     ver("btn").detachEvent("onclick",f1)
    // };
</script>


<script>
//绑定事件的兼容
    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,fnName) {
        if(element.removeEventListener){
            element.removeEventListener(type,fnName,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,fnName);
        }else {
            element["on"+type]=null;
        }
    }
    //测试
    function f1() {
        console.log("第一个");
    }
function f2() {
    console.log("第二个");
}
addEventListener(ver("btn"),"click",f1);
addEventListener(ver("btn"),"click",f2);
ver("btn2").onclick=function () {
    removeEventListener(ver("btn"),"click",f1);
};
</script>

解绑事件

标签：input   click   UNC   函数   false   attach   pre   lse   cti   

原文地址：https://www.cnblogs.com/lujieting/p/10050448.html