イベントをカスタマイズして、より柔軟な開発を実現できます。イベントは、適切に使用すると非常に強力なツールになります。イベントベースの開発には多くの利点があります（後で紹介します）。
カスタムイベントを使用した機能は、イベント、Customevent、Dispatcheventです。
イベントコンストラクターを使用して、イベントを直接カスタマイズします。
var event = new event（ 'build'）; // event.elem.addeventlistener（ 'build'、function（e）{...}、false）; // event.elem.dispatchevent（event）;Customeventは、より高度にカスタマイズされたイベントを作成することができ、一部のデータを添付することもできます。特定の使用法は次のとおりです。
var myevent = new Customevent（eventname、options）;
オプションができる場所：
{詳細：{...}、bubbles：true、cancelable：false}詳細は、いくつかの初期化情報を保存でき、トリガー時に呼び出すことができます。他のプロパティは、イベントに泡立ちやその他の機能があるかどうかを定義することです。
組み込みのイベントは、特定の操作に従ってブラウザによってトリガーされ、カスタマイズされたイベントは手動でトリガーする必要があります。 DispatchEvent関数は、イベントをトリガーするために使用されます。
element.dispatchevent（Customevent）;
上記のコードは、Customeventイベントが要素にトリガーされていることを示しています。一緒に、それを使用してください：
//適切なイベントを追加するlistererobj.addeventlistener（ "cat"、function（e）{process（e.detail）}）; // eventvar event = new customevent（ "cat"、{"detail"：{"hazcheeseburger"：true}}）;カスタムイベントを使用して互換性の問題に注意を払いますが、jQueryの使用ははるかに簡単です。
//カスタムイベント$（element）.on（ 'mycustomevent'、function（）{}）; //トリガーイベント$（element）.trigger（ 'mycustomevent'）;さらに、カスタムイベントをトリガーするときは、より多くのパラメーター情報を渡すことができます：$（ "p"）.on（ "mycustomevent"、function（event、myname）{$（this）.text（myname + "、hi hi hi hi hi hi hi hi hi！"）;}）JavaScriptカスタムイベントは、Clickや送信などの自立したイベントとは異なります。カスタムイベントの利点を説明する前に、カスタムイベントの例を見てみましょう。
<div id = "testbox"> </div> //イベントvar evt = document.createevent（ 'event'）; // define event evt.initevent（ 'customevent'、true、true）; //イベントを聞くvar obj = document.getelementbyid（ 'testbox'）;トリガー '）;}、false）;
特定の効果については、デモを確認できます。コンソールにobj.dispatchevent（evt）を入力します。コンソールでの出力「Customeventイベントがトリガーされた」ということがわかり、カスタムイベントが正常にトリガーされたことを示しています。
このプロセスでは、createeventメソッドは空のイベントEVTを作成し、その後、イベントのタイプを合意されたカスタムイベントとして定義し、対応する要素に耳を傾けます。次に、DispatchEventを使用してイベントをトリガーします。
そうです、カスタムイベントのメカニズムは通常のイベントのようなものです。イベントを聞き、コールバック操作を書き、イベントをトリガーした後にコールバックを実行します。しかし、違いは、カスタムイベントが私たちによって完全に制御されることです。つまり、JavaScriptデカップリングが実装されています。カスタムイベントのメカニズムを使用して、複数の関連するが論理的に複雑な操作を柔軟に制御できます。
もちろん、上記のコードがIEの低いバージョンでは有効になっていないと推測したかもしれません。実際、createevent（）はIE8以下のIEではサポートされていませんが、IEのprivate fireevent（）メソッドがありますが、残念ながらfireeventは標準イベントのトリガーのみをサポートしています。したがって、カスタムイベントをトリガーするために特別で簡単な方法を1つしか使用できません。
// type = 'customevent'などのカスタムイベントは、コールバックは開発者obj [type] = 0; obj [type] ++によって実際に定義されたコールバック関数です。 obj.attachevent（ 'onpropertychange'、function（event）{if（event.propertyname == type）{callback.call（obj）;}}）;このメソッドの原則は、実際にはDOMにカスタムプロパティを追加し、要素のプロパティチャンジイベントを聴くことです。 DOM内の特定のプロパティの値が変更されると、PropertyChangeコールバックがトリガーされ、Callbackで変更されたプロパティがカスタムプロパティであるかどうかが判断されます。その場合、開発者によって実際に定義されたコールバックが実行されます。これは、カスタムイベントのメカニズムをシミュレートします。
カスタムイベントのメカニズムが標準イベントのリスニングおよびシミュレーショントリガーと協力できるようにするために、完全なイベントメカニズムをここに示します。このメカニズムは、標準イベントとカスタムイベントの監視をサポートし、リスニングおよびシミュレーショントリガー操作を削除します。コードのロジックをより明確にするために、カスタムイベントには「カスタム」のプレフィックス（たとえば：CustomTest、CustomAlert）があることが合意されていることに注意する必要があります。
/ *** @descriptionには、イベントリスニング、削除、シミュレーションイベントトリガー、チェーンコールのサポート**/（function（window、undefined）{var ev = window.ev = window。$ = function（element）{return new ev.fn.init（element）;}; // evオブジェクト構築ev.fn = ev.fente = {init（ement（ement）{thisepement） == 1）？ _that.element.addeventlistener（タイプ、コールバック、false）; 0 var fnev = event = event.event {callback.call（_that.element）}} ！_That.Element ['Callback + Callback]）{_that.Element [' callback ' + callback] //標準イベント} _that; /*** @param {string}タイプリスニング* @param {function} callback function：function（type、callback）{var _that = this; _that.Element.RemoveEventListener（タイプ、コールバック、false）; _that.detachevent（ 'onpropertychange'、_that.element ['callback + callback]）; / ** @Supported for _that.Element ['on' + type] = null; _that.element.dispatchevent）{// var evt = createevent（ 'event'）; type.indexof（ 'custom'）{_that.element.fireevent（ 'on'+type）}テストケース1（カスタムイベントテスト）//テストケース1（カスタムイベントテスト）//イベントメカニズムを紹介// console.log（ 'カスタムイベントCustomConsole'）;} // capsulation testbox = $（testbox）; //同時に2つのコールバック関数をバインドし、testbox.add（ 'customconsole'、trigervent）.add（ 'customconsole'、triggeragain）;完全なコードはデモにあります。
デモを開いた後、コンソールでtestbox.trigger（ 'CustomConsole'）を呼び出して、それ自体でカスタムイベントをトリガーします。コンソールが2つのプロンプトを出力し、testbox.remove（ 'CustomConsole'、Triggeragain）を入力して次のリスナーを削除することがわかります。この時点で、testbox.trigger（ 'customConsole'）を使用してカスタムイベントをトリガーします。コンソールは1つのプロンプトのみを出力することがわかります。つまり、次のリスナーが正常に削除されていることがわかります。イベントメカニズムのすべての機能は正常に機能します。