跨浏览器事件处理程序(添加、删除、触发器）

Cross-Browser Event Handler (Add, Remove, Trigger)

本文关键字：删除 触发器 添加 浏览器 事件处理 程序      更新时间：2023-09-26

我有点困惑，当我尝试将函数绑定到 IE7、IE9、Chrome 18、Firefox 12 中的事件（如点击）时，它工作得很好，但是当我尝试删除与事件关联的函数时，只有 IE7 和 Firefox 能够取消附加该功能。这是我正在使用的代码，我做错了什么？

    bindEvent:function(el,evtType,fn){
            if(el.addEventListener){
                el.addEventListener(evtType,fn,false);
            } else {
                if(el.attachEvent){

                  var _el=el;
                   var f = function(){fn.call(_el,window.event);}
                   el.attachEvent( 'on'+evtType, f);
                   el[fn.toString()+evtType]=f;

                    //el.attachEvent('on'+evtType,fn) ;
                } else {
                    el['on'+evtType]=fn;
                }
            }
    return el;
    },
    removeEvent: function(el,evtType, fn ) {
        if( el.removeEventListener){
            el.removeEventListener( evtType, fn, false );
        }else if(el.detachEvent){
            el.detachEvent('on'+evtType,el[fn.toString()+evtType]);
            el[fn.toString()+evtType]=null;

        }else{
            el['on'+evtType]=function(){};
        }
        return el;
    }

我测试这个的代码是： 

var a = document.getElementById('just_a_div');
bindEvent(a,'click',function(){alert('Hi There');});

为了尝试删除，我几乎使用相同的方法：

removeEvent(a,'click',function(){alert('Hi There');});

任何想法或一些预制的片段可以在所有浏览器上有效地完成此任务？希望解决方案可以出现，永远感激。

您的代码适用于IE8，Firefox和chrome中的我的示例（该事件将在五秒后删除）。也许您的测试用例中有错误？你能给我们展示你的测试用例吗？

=== UPDTAE ===

在javascript中，当函数具有相同的参数和内容时，它们也永远不会相同。尝试： alert(function(){alert('Hi There');} == function(){alert('Hi There');}); 结果是 false 。

对函数的敬畏

是平等的，如果他们对同一函数的敬畏。所以var fn = function() { alert('clicked'); }; alert(fn == fn); true.

您应该像我的示例一样对bindEvent和removeEvent函数中的函数使用相同的引用。

用纯javascript代码支持所有浏览器有点困难，更好的方法是使用javascript框架，我认为最好的之一是JQuery，当然还有很多其他框架是为不同的目的而设计的。

使用 jQuery 实现跨浏览器支持。您只需使用 .bind 附加事件，并使用取消绑定将其分离即可。

相关文章：