イベントトリガーは文字通りよく理解され、イベントをトリガーするために使用されますが、それらを使用していない友人の中には混乱する場合があります。イベントは通常、ページ上のユーザーの実際の操作によってトリガーされていますか？一部のイベントはカスタムイベントなどのプログラムで実装する必要があり、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）
}
それ以外{
//その他の標準ブラウザは、DispatchEventメソッドを使用します
var evt = document.createevent（ 'htmlevents'）;
// initeventは3つのパラメーターを受け入れます。
//イベントタイプ、それが泡立っているかどうか、それがブラウザのデフォルト動作をブロックしているかどうか
evt.IniteVent（イベント、True、True）;
return！element.dispatchevent（evt）;
}
};
上記の方法は、イベントトリガーの関数を実装する主流のブラウザと互換性があります。ただし、jQueryのイベントモジュールなどの一部のカプセル化されたイベント処理システムの場合、それはそれほど単純ではなく、シミュレーションによってのみ実装できます。私は以前に非常にシンプルなイベント処理システムを書き、最近カスタムイベントの必要性に遭遇したため、以前のイベントシステムに基づいてイベントトリガーをシミュレートしました。コードは次のとおりです。
コードコピーは次のとおりです。
/**
*イベントトリガー
* @param {object} dom Element
* @param {string / object}イベントタイプ /イベントオブジェクト
* @param {array}イベントハンドラー機能に渡される追加のパラメーター
* @param {boolean}は泡立ちです
*/
トリガー：function（elem、event、data、isstoppropagation）{
var type = event.type ||イベント、
//バブル親要素、文書化するためのすべての方法、ウィンドウ
親= elem.parentnode ||
Elem.OwnerDocument ||
Elem === Elem.OwnerDocument && Win、
eventHandler = $ .data（elem、type + 'handler'）;
isstoppropagation = typeof data === 'boolean'？
データ：（ isStopPropagation || false）;
data = data && isarray（data）？データ ： [];
//カスタムイベントオブジェクトを作成します
event = typeof event === 'object'？
イベント ： {
タイプ：タイプ、
PreventDefault：Noop、
stoppropagation：function（）{
isStopPropagation = true;
}
};
event.target = elem;
data.unshift（event）;
if（eventhandler）{
eventhandler.call（elem、data）;
}
//泡をシミュレートするために再帰的に呼び出します
if（parent &&！isStopPropagation）{
data.shift（）;
this.trigger（親、イベント、データ）;
}
}
シミュレーションの原則は難しくありません。イベント処理機能を特定の要素にバインドします。イベントのトリガーの実際の操作がある場合、対応するイベント処理機能が実行されます。したがって、イベントトリガーの関数を実現するには、対応するイベント処理機能を取得して実行するだけです。これは最も基本的なものです。
実際のイベントが発生すると、ブラウザはイベントオブジェクトを生成します。イベントオブジェクトには、イベントが発生したときにいくつかの属性と情報が含まれます。実際のイベントがない場合、イベントオブジェクトがないため、上記のコードは、最も基本的な機能を満たすためのイベントオブジェクトも作成します。
バブルのイベントもあります。実際のイベントが発生しない場合、当然バブルの動作はありません。次に、バブル関数をシミュレートする場合は、親要素を常に調べて、同じタイプのイベントがドキュメントとウィンドウまでバインドされているかどうかを確認する必要があります。構造が複雑な場合、この再帰コール方法のパフォーマンスはあまり良くないと推定されます。
最後に、ブラウザのデフォルトの動作があります。これをシミュレートするのは非常に面倒だと思います。たとえば、Aタグのデフォルトジャンプ。 jQueryのトリガーをテストしましたが、実装されていませんが、他のいくつかの動作はAPIマニュアルに導入されているようです。結局のところ、この機能はそれほど重要ではなく、私はまだ詳細な研究を行っていません。