绑定事件与解绑事件的兼容代码

最新推荐文章于 2023-01-04 21:11:32 发布

原创最新推荐文章于 2023-01-04 21:11:32 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#绑定事件与解绑事件兼容代码 #javascript

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种跨浏览器兼容的事件绑定和解绑方法，通过自定义addEventListener和removeEventListener函数，实现了对不同浏览器（如火狐、谷歌、IE8）事件处理机制的统一。文章详细解释了如何根据不同浏览器的支持情况选择addEventListener、attachEvent或直接赋值的方式进行事件绑定，以及相应的解绑策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑定事件

//绑定事件
        //定义构造函数addEventListener    element---绑定的元素对应的id,type----事件的类型，fn-----绑定的事件处理函数的名字
        function addEventListener(element, type, fn) {
            //判断如果火狐，谷歌支持，IE8不支持，则进入执行addEventListener方法
            if (element.addEventListener) {
                element.addEventListener(type, fn, false)
                //如果火狐谷歌不支持，IE8支持，则进入执行attachEvent方法
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, fn)
                //如果这三个浏览器都不支持，则使用普通方法绑定事件
            } else {
                //普通绑定事件的方法 
                element["on" + type] = fn;
            }
        }

解绑事件

   //解绑事件
        //定义构造函数removeEventListener    element---绑定的元素对应的id,type----事件的类型，fn-----绑定的事件处理函数的名字
        function removeEventListener(element, type, fnName) {
            //如果谷歌火狐支持，IE8不支持，则进入
            if (element.removeEventListener) {
                //使用removeEventListener方式解绑事件
                element.removeEventListener(type, fnName, false)
                //如果谷歌火狐不支持，IE8支持，则进入
            } else if (element.detachEvent) {
                //使用detachEvent解绑事件
                element.detachEvent("on" + type, fnName)
            } else {
                //如果谷歌火狐IE8都不支持，则用普通方式解绑事件
                element["on" + type] = null;
            }
        }