JavaScript はクロスブラウザーでのイベント バインディング関数の追加と削除を実装します。

この記事の例では、クロスブラウザーでイベント バインディング関数を追加および削除する JavaScript 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

IE のイベント バインディング関数はattachEvent ですが、Firefox と Safari は addEventListener です。 jQuery を使用すると、単純な binding() または $().click() などの関数を使用して問題を解決できます。JavaScript フレームワークを使用していない場合は、次のカプセル化された binding() 関数を使用できます。

イベントバインドbind()を追加

/************************************
* 添加事件绑定
* @param obj  : 要绑定事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn  : 事件处理函数
************************************/
function bind( obj, type, fn ){
  if( obj.attachEvent){
    obj['e'+type+fn]= fn;
    obj[type+fn]=function(){
     obj['e'+type+fn]( window.event);
    }
    obj.attachEvent('on'+type, obj[type+fn]);
  }else
    obj.addEventListener( type, fn,false);
}

たとえば、クリック イベントをドキュメントに追加します:

var fn=function(){
  alert("Hello, World!!");
};
bind(document,"click", fn);

イベントバインディング unbind() を削除

上記のbind()関数のunbind()

/************************************
* 删除事件绑定
* @param obj : 要删除事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件处理函数
************************************/
function unbind( obj, type, fn ){
  if( obj.detachEvent){
    obj.detachEvent('on'+type, obj[type+fn]);
    obj[type+fn]=null;
  }else
    obj.removeEventListener( type, fn,false);
}

たとえば、最初のバインドされたドキュメントのクリック イベントを削除します:

コードをコピーします コードは次のとおりです:

unbind(document,"click",fn);

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。