ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript はクロスブラウザーでのイベント バインディング関数の追加と削除を実装します。

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

WBOY
リリース: 2016-05-16 15:47:14
オリジナル
1083 人が閲覧しました

この記事の例では、クロスブラウザーでイベント バインディング関数を追加および削除する 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 プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート