クロスブラウザーイベントハンドラー（追加、削除、トリガー）

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で動作します（イベントは5秒後に削除されます）。おそらくあなたのテストケースにエラーがありますか？テストケースを見せてもらえますか？彼らは同じパラメータとコンテンツを持っている場合はJavaScript 機能で

=== === UPDTAE

も同じになることはありません。試してください：alert(function(){alert('Hi There');} == function(){alert('Hi There');});結果はfalseです。

同じ機能に遭遇すると、機能は同じです。従ってvar fn = function() { alert('clicked'); }; alert(fn == fn);はtrueです。

my exampleのように、bindEventとremoveEventの関数と同じ参照を使用する必要があります。

Answer 2

あまり良い方法ではJavaScriptフレームワークを使用することで、あなたの純粋なJavaScriptコードとすべてのブラウザをサポートするには少し難しいIt`sa、私は最高の一つは、コースのJQuery &である他のフレームワークがたくさんあると思います異なる目的のために設計されています。

Answer 3

ブラウザ間のサポートにjQueryを使用します。 .bindを使用してイベントを添付し、unbindを使用してイベントを切り離すことができます。