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

最新推荐文章于 2025-07-14 08:30:00 发布

Poetry Code

最新推荐文章于 2025-07-14 08:30:00 发布

阅读量7.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 事件兼容前端

本文链接：https://blog.youkuaiyun.com/weixin_44253336/article/details/98638068

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了在JavaScript中解绑事件的三种方法，包括直接设置事件处理器为null，使用addEventListener与removeEventListener，以及attachEvent与detachEvent。文章通过实例展示了如何针对不同浏览器使用兼容代码进行事件解绑。

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

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

<body>
	<input type="button" value="触发事件" id="btn1"/>
	<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
</body>

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);-------解绑事件方法

    function f1() {
        console.log("第一个");
    }

    function f2() {
        console.log("第二个");
    }

    //为按钮btn1绑定多个事件
    document.getElementById("btn1").addEventListener("click", f1, false);
    document.getElementById("btn1").addEventListener("click", f2, false);

    //点击第二个按钮把第一个按钮的第一个点击事件解绑
    document.getElementById("btn2").onclick = function () {
        //解绑事件的时候,需要在绑定事件的时候,使用命名函数
        document.getElementById("btn1").removeEventListener("click", f1, false);
    };

3.

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

    function f1() {
        console.log("第一个");
    }

    function f2() {
        console.log("第二个");
    }

    document.getElementById("btn1").attachEvent("onclick", f1);
    document.getElementById("btn1").attachEvent("onclick", f2);

    document.getElementById("btn2").onclick = function () {
        document.getElementById("btn1").detachEvent("onclick", f1);
    };

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

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