Question

我有点困惑，当我尝试将功能绑定到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');});

任何想法或一些预先制作的片段，可以在所有浏览器上有效地完成这项任务？希望能找到解决方案，永远感激。

Answer 1

您的代码在IE8，Firefox和Chrome中的my example中运行（事件将在五秒后删除）。也许你的测试用例中有错误？你能告诉我们你的测试用例吗？

=== UPDTAE ===

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

对功能的敬畏是相同的，如果他们尊重相同的功能。因此var fn = function() { alert('clicked'); }; alert(fn == fn);为true。

您应该对bindEvent和removeEvent函数中的函数使用相同的引用，例如my example。

Answer 2

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

Answer 3

使用jQuery进行跨浏览器支持。您只需使用.bind附加活动，然后使用unbind将其分离即可。

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

3 个答案: