JavaScript 解绑事件方法和相应兼容代码！

今天药忘吃喽~ 2021-11-08 23:04 276阅读 0赞

### 目录： ###

*   *  一、解绑事件的3种方式：
     *   *   *  1.
             *  2.
             *  3.
     *  二、解绑事件的兼容代码：
     *  三、总结：

## 一、解绑事件的3种方式： ##

**注意：用什么方式绑定事件，就应该用对应的方式解绑事件。**  
基础html代码如下：

#### 1. ####

对象.on事件名字 =事件处理函数-------绑定事件方法  
对象.on事件名字 = null;-------------------解绑事件方法

document.getElementById("btn1").onclick = function () {
            console.log("触发事件");
        };
        document.getElementById("btn2").onclick = function () {
            //解绑事件
            document.getElementById("btn1").onclick = null;
        };

#### 2. ####

**(谷歌火狐支持,IE8不支持)**  
对象.addEventListener(“没有on的事件类型”,命名函数,false);------------绑定事件方法  
对象.removeEventListener(“没有on的事件类型”,函数名字,false);-------解绑事件方法

#### 3. ####

对象.attachEvent(“on事件类型”,命名函数);------------绑定事件方法  
对象.detachEvent(“on事件类型”,函数名字);-----------解绑事件方法

## 二、解绑事件的兼容代码： ##

//为任意的一个元素,解绑对应的事件
    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;
        }
    }

## 三、总结： ##

1.在进行绑定事件的时候，我们应该要注意用什么方式绑定事件，就应该用对应的方式进行解绑事件。  
2.不同的解绑方式，在不同的浏览器可能没有效果，应该尽量使用兼容代码。

**相关推荐：**  
[js原生实现为元素绑定事件兼容代码][js]

[js]: https://blog.csdn.net/weixin_44253336/article/details/98611111