カスタムイベント--eventとCustomEventを回しJS

ページ書き込みのMDN Event.initEvent（）のトップで、カスタムイベントを学習する前に：この機能は、一部のブラウザではまだそれをサポートしていますが、Web標準から削除されますが、それはいくつかの将来の時間に支援停止する場合がありますこの機能を使用しないようにしてみてください。

　　代わりに、私たちは、EventオブジェクトとCustomEventオブジェクトを作成することによって、カスタムオブジェクトを作成することができます。イベント（）オブジェクトの開始を開始します。

イベント（）コンストラクタオブジェクト--event

　　私たちは、イベントを（）を使用して、カスタムオブジェクトを作成する方法については、以下の例を見ることができます：

。1ます。<script type = "text / JavaScriptを">   
 2 / * /イベントオブジェクト、NEWEVENTの名前、種類のビルド*を作成する
 =新しい新しいEvent（ 'ビルド'、{泡3のvar NEWEVENT：。、真解約へ：trueに、作曲： } trueに）; 
 4          
 5 / * * /プロパティおよび割り当てにイベントオブジェクトを作成する
 6 newEvent.name =「新しいイベント！」; 
 7      
 ドキュメントオブジェクトにバインド8 / *カスタムイベント、ここにバインドイベントタイプにイベントと我々は同じを作成し、またはトリガすることはできません* / 
 9 document.addEventListener（「構築」、機能（）{ 
10アラート（「カスタムイベントをトリガー！」+ newEvent.name）; 
11}、falseを）
12は、          
13 / *カスタム・トリガ・イベント* / 
14 document.dispatchEvent（NEWEVENT）;   
15 </ SCRIPT>

　　文書「document.dispatchEvent（NEWEVENT）」の、それは最初のイベントをトリガするための時間を開始します。

　　あなたの後に毎回「document.dispatchEvent（NEWEVENT）は」このイベントをトリガします。

　　さて、このメソッドに文法イベント（）について（disapthEventを（）ここでの説明、他の私のノートに記述されていない）話をしましょう：

　　イベント=新しいイベント（typeArg、eventInit）。

　　typeArg：文字列を渡し、イベントの種類を指定します。ここでは、クリックイベント（クリック）のようなイベントのタイプを指し、イベント（提出）、loadイベント（負荷）のように。

　　eventInit：オプション、辞書のEventInitタイプを渡します。実際には、我々はInitEventパラメータを使用している辞書のこのEventInit型がで、（時間を渡す必要があります）キーと値のペアの送達形態が、それはパラメータを複数選択することができます：

　　　　泡：イベントバブリングをサポートするかどうか、boolean型パラメータを渡し、デフォルト値はfalseです。

　　　　解約：boolean型のパラメータを渡し、イベントのデフォルト動作をキャンセルするかどうか、デフォルト値はfalseです。

　　　　作曲：イベントはブール型パラメータを渡す、ルートノードの外に影DOM（シャドウDOM）イベントリスナーをトリガするかどうか、デフォルト値は偽です。（影についてDOMを見ることができます。この記事ChokCocoの前任者をこのパラメータは、中に新しいパラメータなしInitEvent（）で、私は多分、私は自分自身の理解によると、シャドウDOMに関するメモを書きます、と述べここでは不明です）。

　　実際、使用法では使用にcreateEvent（）を組み合わせinitEvent（）はほとんどが、イベントは（）IEブラウザをサポートしていませんので、我々はまだ使用する方法を見ています。

CustomEvent（）コンストラクタオブジェクト--CustomEvent

　　CustomEvent（）（）可能なイベントのような割り当てとして、あなたが相関値（詳細）に関連付けられたイベントを転送することができ、ウェブ労働者（メインスレッド別のスレッドから分離）を使用することができます。（しかし、私は泥棒イベント（よ）私はこの外観を完了するために、ウェブの労働者を使用することができます追加を見ていません）

　　（第1の相関値は、イベントの詳細を使用していない）イベントオブジェクトを作成するために）（CustomEventを使用する方法の以下の例を見てみましょう：

。1ます。<script type = "text / JavaScriptを">   
 2 / *イベントオブジェクト、NEWEVENTの名前、種類のビルド* /を作成する
 =新しい新しいCustomEvent（ 'ビルド'、{泡3のvar NEWEVENT：。、真の解約に：に忠実、作曲： }）trueに、
 4      
 5 / *このイベントオブジェクトプロパティとイベントがあることにバインドされて割り当て、そして我々は同じを作成したイベントの種類を作成する、または* /トリガすることができません
 6 newEvent.name =「新しいイベントを！」; 
 7      
 * /ドキュメントオブジェクトにバインド8 / *カスタムイベント
 document.addEventListener（）（、機能を"構築する" {9 
10アラート（+ newEvent.name） "！あなたが作成したCustomEventを使用してカスタムイベントをトリガー"。
} 11、偽に）
12である          
13は、カスタム・トリガ・イベント* / * /で
14 document.dispatchEvent（NEWEVENT）;   
15 </ SCRIPT>

　　文書「document.dispatchEvent（NEWEVENT）」の、それは最初のイベントをトリガするための時間を開始します。

　　あなたの後に毎回「document.dispatchEvent（NEWEVENT）は」このイベントをトリガします。

　　その後、我々はCustomEvent（）構文を見てみましょう。

　　イベント=新しいCustomEvent（typeArg、customEventInit）。

　　customEventInit：オプション。CustomEventInit辞書を渡します。実際には、この辞書はinitCustomEventは（）、このパラメータは、イベント関連の値（詳細）であるとき、我々は必要なパラメータを使用することです：

　　　　詳細：また、デフォルト値はnullである、いずれかのタイプ（つまり、渡すことができるパラメータのいずれかのタイプを言うことです）。そして、この値はイベントに関連付けられた値です。

　　第二引数として細部の使用例を示す前に、私たちが最初に一つのことに注意を払う必要があります。CustomEventInit辞書もEventInit辞書のパラメータを受け入れることができ、開始と場合のように、私が構成、解約、泡EventInit辞書を通過しました。

　　次の例は、（見ての便宜のために、この時間が辞書にEventInitパラメータを渡すにはない）私は、プロセスを厚くなり、詳細の一部を使用するために、詳細なパラメータの使用を示します：

。1ます。<script type = "text / JavaScriptを">   
 2 / *、タイプのビルドをイベントオブジェクト、NEWEVENTの名前を作成します* / 
 。3のvar NEWEVENT =新新CustomEvent（ 'ビルド'、{ 
 4。        詳細：{
 5。            犬： "WO" 、CAT： "MIO" 
 。6         }
。7}）; 
 8。      
 9 / *文書オブジェクトのカスタムイベントバインディング* /。
10 document.addEventListener（ "ビルド"、関数（）{ 
11アラート（「event.detail.dog。 ： "+ event.detail.dog
 12 +である" \ n-event.detail.cat：「+ event.detail.cat）; 
13れる}、falseに）
14      
15 / *カスタム・トリガ・イベント* / 
16 document.dispatchEvent（NEWEVENT） ;  
17 </ SCRIPT>

　　文書「document.dispatchEvent（NEWEVENT）」の、それは最初のイベントをトリガするための時間を開始します。

　　あなたの後に毎回「document.dispatchEvent（NEWEVENT）は」このイベントをトリガします。

参考文献：

MDN -の作成とイベントをトリガー：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

MDN -イベント（）：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event

MDN - CustomEvent（）：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent

MDN - CustomEvent.initCustomEvent（）：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent

MDN - CustomEvent.detail：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/detail

私は間違っているところを見つけるdalaoがある場合の注意事項は、ちょうど私の個人的理解、正しい答えではないかもしれないが、私にメッセージを伝え、私たちは一緒に勉強し、よく一緒に進捗（O「▽ `○）テクノます

イベント（）コンストラクタオブジェクト--event

　　私たちは、イベントを（）を使用して、カスタムオブジェクトを作成する方法については、以下の例を見ることができます：

。1ます。<script type = "text / JavaScriptを">   
 2 / * /イベントオブジェクト、NEWEVENTの名前、種類のビルド*を作成する
 =新しい新しいEvent（ 'ビルド'、{泡3のvar NEWEVENT：。、真解約へ：trueに、作曲： } trueに）; 
 4          
 5 / * * /プロパティおよび割り当てにイベントオブジェクトを作成する
 6 newEvent.name =「新しいイベント！」; 
 7      
 ドキュメントオブジェクトにバインド8 / *カスタムイベント、ここにバインドイベントタイプにイベントと我々は同じを作成し、またはトリガすることはできません* / 
 9 document.addEventListener（「構築」、機能（）{ 
10アラート（「カスタムイベントをトリガー！」+ newEvent.name）; 
11}、falseを）
12は、          
13 / *カスタム・トリガ・イベント* / 
14 document.dispatchEvent（NEWEVENT）;   
15 </ SCRIPT>

　　文書「document.dispatchEvent（NEWEVENT）」の、それは最初のイベントをトリガするための時間を開始します。

　　あなたの後に毎回「document.dispatchEvent（NEWEVENT）は」このイベントをトリガします。

　　さて、このメソッドに文法イベント（）について（disapthEventを（）ここでの説明、他の私のノートに記述されていない）話をしましょう：

　　イベント=新しいイベント（typeArg、eventInit）。

　　　　泡：イベントバブリングをサポートするかどうか、boolean型パラメータを渡し、デフォルト値はfalseです。

　　　　解約：boolean型のパラメータを渡し、イベントのデフォルト動作をキャンセルするかどうか、デフォルト値はfalseです。

CustomEvent（）コンストラクタオブジェクト--CustomEvent

。1ます。<script type = "text / JavaScriptを">   
 2 / *イベントオブジェクト、NEWEVENTの名前、種類のビルド* /を作成する
 =新しい新しいCustomEvent（ 'ビルド'、{泡3のvar NEWEVENT：。、真の解約に：に忠実、作曲： }）trueに、
 4      
 5 / *このイベントオブジェクトプロパティとイベントがあることにバインドされて割り当て、そして我々は同じを作成したイベントの種類を作成する、または* /トリガすることができません
 6 newEvent.name =「新しいイベントを！」; 
 7      
 * /ドキュメントオブジェクトにバインド8 / *カスタムイベント
 document.addEventListener（）（、機能を"構築する" {9 
10アラート（+ newEvent.name） "！あなたが作成したCustomEventを使用してカスタムイベントをトリガー"。
} 11、偽に）
12である          
13は、カスタム・トリガ・イベント* / * /で
14 document.dispatchEvent（NEWEVENT）;   
15 </ SCRIPT>

　　文書「document.dispatchEvent（NEWEVENT）」の、それは最初のイベントをトリガするための時間を開始します。

　　あなたの後に毎回「document.dispatchEvent（NEWEVENT）は」このイベントをトリガします。

　　その後、我々はCustomEvent（）構文を見てみましょう。

　　イベント=新しいCustomEvent（typeArg、customEventInit）。

。1ます。<script type = "text / JavaScriptを">   
 2 / *、タイプのビルドをイベントオブジェクト、NEWEVENTの名前を作成します* / 
 。3のvar NEWEVENT =新新CustomEvent（ 'ビルド'、{ 
 4。        詳細：{
 5。            犬： "WO" 、CAT： "MIO" 
 。6         }
。7}）; 
 8。      
 9 / *文書オブジェクトのカスタムイベントバインディング* /。
10 document.addEventListener（ "ビルド"、関数（）{ 
11アラート（「event.detail.dog。 ： "+ event.detail.dog
 12 +である" \ n-event.detail.cat：「+ event.detail.cat）; 
13れる}、falseに）
14      
15 / *カスタム・トリガ・イベント* / 
16 document.dispatchEvent（NEWEVENT） ;  
17 </ SCRIPT>

　　文書「document.dispatchEvent（NEWEVENT）」の、それは最初のイベントをトリガするための時間を開始します。

　　あなたの後に毎回「document.dispatchEvent（NEWEVENT）は」このイベントをトリガします。

参考文献：

MDN -の作成とイベントをトリガー：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

MDN -イベント（）：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event

MDN - CustomEvent（）：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent

MDN - CustomEvent.initCustomEvent（）：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent

MDN - CustomEvent.detail：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/detail

カスタムイベント--eventとCustomEventを回しJS

おすすめ