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

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);
}
};

/**
* イベントトリガー
* @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マニュアルで紹介されているようです。結局のところ、この機能はそれほど重要ではないので、まだあまり調べていません。