JavaScriptイベントトリガーの実装紹介_JavaScriptスキル

イベント トリガーは文字通り、イベントをトリガーするために使用されるものであるとよく理解できますが、イベント トリガーを使用したことがない人は、通常、ページ上でのユーザーの実際の操作によってイベントがトリガーされるわけではありません。 jQuery の ajax フレームワークの一部のカスタム イベントは、イベント トリガーによって実装する必要があるため、この見方は完全に正しいわけではありません。もちろん、特殊なケースでは、実際のユーザー操作を通じてイベントをトリガーするよりも、イベント トリガーを使用してイベントをトリガーする方が便利な場合があります。

ブラウザにはイベント トリガーをサポートするネイティブ メソッドがありますが、互換性には大きな違いがあります。この互換性の問題は完全に想定されています。IE には独自のメソッドがあり、他の標準ブラウザにも、どのメソッドが適切であるかに関係なく、一連のメソッドがあります。悪く言えば、WEB 開発者にとって、いくつかのメソッドを考え出すのは一種の拷問です。 IE はイベント トリガーを実装するために fireEvent メソッドをサポートし、標準ブラウザはイベント トリガーを実装するために dispatchEvent をサポートします。二重化された IE9 は両方をサポートします。以下は、prototype.js のソース コードです (実際には Situ Zhengmei のブログからコピーしました):

コードをコピー コードは次のとおりです。

var fireEvent = function(element,event) {
if (document.createEventObject){
// IE ブラウザは fireEvent メソッドをサポートします
var evt = document.createEventObject();
return element.fireEvent('on'event,evt)
}
else{
// 他の標準ブラウザはdispatchEventメソッドを使用します
var evt = document.createEvent( 'HTMLEvents' );
// initEventは3つのパラメータを受け入れます:
// イベントtype 、バブルするかどうか、ブラウザのデフォルト動作を防ぐかどうか
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};

上記のメソッドは、イベント トリガー機能を実装するために主流のブラウザーと互換性があります。ただし、jQuery のイベント モジュールなど、一部のカプセル化されたイベント処理システムの場合は、それほど単純ではなく、シミュレーションを通じてのみ実装できます。以前に非常に単純なイベント処理システムを作成したことがありますが、最近カスタム イベントの必要性に遭遇したため、以前のイベント システムに基づいてイベント トリガーをシミュレートしました。コードは次のとおりです。

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

/**
* イベントトリガー
* @param { Object } DOM 要素
* @param { String / Object } イベントタイプ/イベントオブジェクト
* @param { Array } イベント処理関数に渡される追加情報パラメータ
* @param { Boolean } バブルするかどうか
*/
trigger: function( elem,event,data , isStopPropagation ){
var type =event.type ||event,
// ドキュメントまでのバブル親要素、window
parent = elem.parentNode ||
elem.ownerDocument | |
elem === elem.ownerDocument && win,
eventHandler = $.data( elem, type 'Handler' );

isStopPropagation = typeof data === 'boolean' ? > data : (isStopPropagation || false);

data = data && isArray( data ) ? data : [];

// カスタム イベント オブジェクトを作成します
events = typeof events === 'オブジェクト' ?
イベント : {
タイプ : type,
防止デフォルト : noop,
stopPropagation : function(){
isStopPropagation = true;
}
};

event.target = elem;
data.unshift(event);
if(eventHandler){
eventHandler.call(elem, data);
}
// バブリングをシミュレートするために再帰的に自身を呼び出します
if(parent && !isStopPropagation ){
data.shift();
this.trigger(parent,event,data );
}
}

シミュレーションの原理は難しくありません。イベントをトリガーする実際の操作があれば、対応するイベント処理関数が実行されます。イベント トリガーを取得するだけで済みます。その後、対応するイベント処理関数が実行されます。これは最も基本的なものです。

実際のイベントが発生すると、ブラウザはイベント オブジェクトを生成します。このイベント オブジェクトには、イベント発生時のいくつかの属性と情報が含まれます。実際のイベントが発生しない場合、イベント オブジェクトは存在しないため、上記のコードは最も基本的な機能を満たすイベント オブジェクトも作成します。

イベントバブリングもあります。実際のイベントが発生しない場合、当然バブリング動作は発生しません。そのため、バブリング関数をシミュレートしたい場合は、常に親要素を検索し、同じ型がバインドされているかどうかを確認する必要があります。構造が複雑な場合、この再帰呼び出しメソッドのパフォーマンスは低下すると推定されます。

最後はブラウザのデフォルトの動作ですが、とても面倒なので実装方法が分かりません。 jQueryのトリガーをテストして実装していませんでしたが、その他の動作はAPIマニュアルで紹介されているようです。結局のところ、この機能はそれほど重要ではないので、まだあまり調べていません。