イベントは、非同期プログラミングの実装方法であり、基本的にプログラムのさまざまなコンポーネント間の通信であり、DOMは多数のイベントをサポートしています。
この記事では、これらのポイントを使用して、イベント処理の基本原則を詳細に分析します：イベントタイプ、イベントターゲット、イベントハンドラー、イベントオブジェクト、イベント伝播
最後に、イベントオブジェクトを紹介します。
1。イベントタイプ： 「マウスオーバー」などのイベントの種類を示すために使用される完全な小文字です
従来のイベントタイプ：フォームイベント、ウィンドウイベント、マウスイベント、キーボードイベント、DOMイベント、HTML5イベント、タッチスクリーン、モバイルデバイスイベントなど。
2。イベントターゲット：イベントをトリガーするオブジェクト
3。イベントリスナー：イベントを処理または応答する関数。オブジェクトがイベントをトリガーすると、ブラウザはオブジェクトに登録されている関数を自動的に呼び出します。
イベントハンドラーを登録（イベントを聞く）：
1. <table id = "" onclick = "modifyText（）;">;また、一部のイベントタイプは、通常、特定のドキュメント要素ではなく、ブラウザで直接トリガーされます。これらのイベントハンドラーは<body>タグに配置されますが、ブラウザは<body onload = "alert（ 'hello world！'）"などのウィンドウオブジェクトに登録します。これらのイベントには以下が含まれます。
onafterprint onfocus onOnlineは、beforeprint onhashchangeをオンレースします
onpagehide onstorage onbeforeunload onload onpageshow onundo
onblur onmessage onpopstate onunload oneRror OnOffline Onredo
HTML属性としてのイベントの値はJSコード文字列であり、これは処理関数の本体であり、{}を含みません。注：他のHTMLタグにイベントを登録しないようにしてください。HTMLとJavaScriptコードの分離の原則に違反しています。イベント関数がロードされる前にイベントオブジェクト要素をクリックすると、エラーが発生します。
2。DOM要素の属性として登録します（バブル段階でのみトリガーされます）。現時点では、イベントハンドラー属性の名前には「on」でプレフィックスする必要があります。この方法は、すべてのブラウザと互換性があります。唯一の欠点は、1つのイベントハンドラー機能のみを登録できることです。 onClick属性が2回定義されている場合、後者の定義は前の定義を上書きします。例：window.onload = function（）{...};
3。IE8および以前のバージョンを除くすべてのブラウザで、DOMのイベント操作（リスニングとトリガー）がイベントTargetインターフェイスで定義されています。このインターフェイスは、要素ノード、ドキュメントノード、ウィンドウオブジェクト用に展開されます。さらに、XMLHTTPRequest、Audionode、AudioContextなどのブラウザの組み込みオブジェクトもこのインターフェイスを展開しています。このインターフェイスには3つの方法があります。AddEventListenerとRemoveEventListenerを使用してリスナー機能をバインドおよび削除し、Dispatcheventを使用してイベントをトリガーします。
AddEventListener（タイプ、リスナー、Boolean）メソッドは、リスナーを登録するために使用されます。 3番目のパラメーターは、イベント伝播方法を設定します。通常、デフォルト値のfalseが使用されます。つまり、リスニング機能はバブルステージ（人形）でのみトリガーされます。 trueに設定すると、リスニング機能がキャプチャステージ（キャプチャ）でトリガーされることを意味します。複数のリスナーは同じオブジェクト上の同じタイプイベントに登録でき、すべてのリスナーは登録命令でトリガーされます（登録リスナーの登録はブラウザによって無視されます）。
パラメーターをリスニング関数に渡す場合は、elm.addeventlistener（ 'click'、function（）{risten（ 'real arguntion'）}、falseなどの匿名関数でリスニング関数をラップできます。
登録されたリスナーが関数の参照変数である場合、removeEventLestener（タイプ、リスナー、ブール）を使用して、イベントターゲットでリスナーを削除できます。同じリスニングイベントのバブルイベントとキャプチャイベントは、個別に削除する必要があり、2つは互いに干渉しません。
var div = document.getElementById（ 'div'）; var ristener = function（event）{ / *ここで何かをします * /}; div.addeventlistener（ 'click'、リスナー、false）; div.RemoveEventListener（ 'Click'、リスナー、False）;DispatchEvent（イベント）メソッドは、現在のノードで指定されたイベントを手動でトリガーし、それによりリスニング機能の実行をトリガーします。この方法は、ブール値を返します。リスニング関数がevent.preventdefault（）を呼び出す限り、falseを返します。そうでなければそれは本当です。パラメーターは、イベントオブジェクトのインスタンスです。パラメーターを空にすることはできず、有効なイベントオブジェクトである必要があります。そうしないと、エラーが報告されます。
btn.addeventlistener（ 'click'、リスナー、false）;
var e = new Event（ 'Click'）;
btn.dispatchevent（e）; //クリックイベントはすぐにBTNでトリガーされ、リスナーはすぐに呼び出されます
次の例では、Dispatcheventメソッドの返品値に基づいてイベントがキャンセルされたかどうかを決定します。
var canceled =！btn.dispatchevent（event）;
if（キャンセル）{console.log（ 'event cancel'）; }
else {console.log（ 'event not canceled'）; }}
4。IE8および以前のバージョンは、AttachEvent（タイプ、リスナー）とDetachevent（タイプ、リスナー）のみをサポートしています。それらの使用法とAddEventListenerは異なります：a。パラメーターは2つしかありません。 b。パラメータータイプには「on」でプレフィックスする必要があります。 c。同じリスニングイベントの繰り返し登録が可能になり、呼び出されます。 d。 AttachEventメソッドを使用することには欠点があります。これは、この値がイベントをトリガーする要素の代わりにウィンドウオブジェクトになるということです。
注文の問題：1）。オブジェクトプロパティまたはHTML属性を設定することで登録されているハンドラーは、常に最初に呼ばれます。
2）。 AddEventListenerに登録されたハンドラーは、登録命令で呼び出されます。
3）。レガシーでactibleventに登録されたハンドラーIEは、任意の順序で呼び出される場合があります。
返品値の問題：
1）。イベントハンドラーの返品値は、属性を介して登録されているハンドラーにとってのみ意味があります。オブジェクト属性またはHTML属性をFALSEに設定してイベントハンドラーの返品値を登録することは、このイベントに関連するデフォルト操作を実行しないようブラウザに指示することです。ブラウザが新しいページにジャンプしたい場合、ウィンドウオブジェクトのOnBeForeUnloadイベントがトリガーされます。戻り値が文字列の場合、クエリ確認ダイアログボックスに表示されます。
2）.addeventlistener（）またはattachevent（）イベントハンドラーを登録します。ブラウザのデフォルト操作をキャンセルするには、PreventDefault（）メソッドを呼び出すか、イベントオブジェクトのReturnValueプロパティを設定する必要があります。
これは問題を指します：
1）。 AddEventListenerメソッドで指定されたリスニング機能は、このオブジェクトの内部は常にイベントをトリガーするノードを指します。
2）。 IE8および以前のAttachmentEventメソッドによって登録されたイベントハンドラー関数のこれは、グローバルオブジェクトを指しています。
次の方法で記述されたこのすべてのオブジェクトは、要素ノードを指します。
element.onclick = print;
Element.AddeventListener（ 'Click'、print、false）
element.onclick = function（）{console.log（this.id）;}
<element onclick = "console.log（this.id）">
このオブジェクトは、次の方法でグローバルオブジェクトを指します。
element.onclick = function（）{dosomething（）};
element.setattribute（ 'onclick'、 'dosomething（）'）;
<element onclick = "dosomething（）">
Element.Attachevent（ 'onclick'、dosomhine）// ie8
メモリの問題：次のコードでは、各ループで新しい匿名関数が作成され、メモリがますます消費されます。匿名関数への参照を維持していないため、RemoveEventListenerと呼ぶことはできません。したがって、2番目のパラメーターリスナーは、処理イベント関数への参照として保持する必要があります。
for（i = 0; i <els.length; i ++）{els [i] .addeventlistener（ "click"、function（e）{/*do something*/}、false}）; }古いIEと互換性のある汎用ツール関数：
イベントハンドラーのこのツール関数がイベントのターゲットオブジェクトを指していることを確認してください
関数addEvent（ターゲット、タイプ、func）{if（target.addeventlistener）{target.addeventlistener（type、func、false）; } else {target.attachevent（ 'on'+type、function（e）{// AttachEventによって登録されている処理関数は参照に縛られていないため、Detacheventを使用してreturn func.call（ターゲット、e）;}）を削除することは不可能です。 }}一般的なイベントハンドラー（IE8および以前のバージョンのため、イベントターゲットが必要なオンプロパティハンドラーはウィンドウを必要とします。イベントオブジェクトを取得するためにイベント、イベントをトリガーするターゲットノードオブジェクトはイベントを通じて取得されます。
function func（event）{var event = event || window.event; var target = event.target || event.srcelement; //.......ハンドラーコード}4。イベントの伝播：それは、ブラウザがイベントハンドラーをトリガーするオブジェクトを決定するプロセスです。
「DOM2レベルイベント」で指定されたイベントフローには、ターゲットステージ==>イベントバブルステージのイベントキャプチャステージ==>の3つのステージが含まれます。最初に起こるのは、イベントキャプチャフェーズ（外層から内側の層への伝播）です。これは、イベントがイベントを迎撃するために通過するすべてのノードに機会を提供します。次に、実際のターゲットレセプションイベントがあります（登録順に実行されます）。最後の段階は、泡立つステージです（内層から外層までの泡立ち）。
コンテナ要素とネストされた要素、つまりイベントハンドラーがキャプチャステージとバブルステージで呼び出される場合：イベントはイベントハンドラーをDOMイベントストリームの順序で実行し、イベントがターゲット段階にある場合、イベントコールの順序はバインディングイベントの順序によって決定されます。
イベントを特定のノードに到達し、伝播しなくする場合は、次の2つの方法があります。
1。イベントオブジェクトのevent.StopPropagation（）メソッドを使用して、現在のリスニング関数の伝播を防ぎます。
2。イベントオブジェクトのevent.stopimmediatepropagation（）メソッドを使用して、イベントオブジェクト上の現在のイベントのすべてのリスニング関数の伝播を防ぎます。
イベントの委任：イベントはバブルステージの親ノードまで上向きに伝播するため、子ノードのリスニング関数は親ノードで定義でき、親ノードのリスニング関数は複数の子要素のイベントを均一に処理できます。
5。イベントオブジェクト（イベント）：イベントが発生した後、イベントオブジェクトが生成され、リスニング関数のパラメーターとして渡されます。ブラウザはネイティブにイベントオブジェクトを提供し、すべてのイベントはこのオブジェクトのインスタンスであるか、イベントを継承します。プロトタイプオブジェクト。イベントオブジェクト自体は、新しいインスタンスを生成するために使用できるコンストラクターです。
var ev = new Event（ "look"、{"bubbles"：true、 "キャンセル可能"：false}）;
document.dispatchevent（ev）;
イベントコンストラクターは2つのパラメーターを受け入れます。最初のパラメーターは文字列で、イベントの名前を示します。 2番目のパラメーターはオブジェクトで、イベントオブジェクトの構成を示します。このパラメーターには、次の2つのプロパティを持つことができます。
バブル：ブール値、オプション、デフォルトはfalseで、イベントオブジェクトが泡立っているかどうかを示します。
キャンセル：ブール値、オプション、デフォルトはfalseで、イベントをキャンセルできるかどうかを示します。
イベントオブジェクトのプロパティ：
1。イベントの段階に関連しています。
バブル：読み取り専用のプロパティは、ブール値を返し、現在のイベントが泡立つかどうかを示します。イベントがバブルになるかどうかに基づいて、さまざまな関数を呼び出すことができます。
EventShase：整数値（0,1,2,3の1つ）を返し、イベントの現在の状態を示します
<0、イベントはまだ発生していません。
<1、イベントは現在キャプチャ段階にあります。つまり、祖先ノードからターゲットノードへの伝播の過程にあります。このプロセスは、ウィンドウオブジェクトからドキュメントノード、次にターゲットノードの親ノードまで、htmlhtmlementノードまでです。
<2、イベントはターゲットノードに到達します。つまり、ターゲット属性によって指されたノードに到達します。
<3、イベントはバブルステージ、つまり、ターゲットノードから祖先ノードまでのバック伝播プロセスにあります。このプロセスは、親ノードからウィンドウオブジェクトまでずっとあります。この段階は、バブル属性が真の場合にのみ発生する可能性があります
2。イベントのデフォルトの動作に関連しています。
キャンセル：イベントをキャンセルできるかどうかを示すブール値を返します。イベントをキャンセルしたい場合は、このイベントのPreventDefaultメソッドに電話する必要があります
DefaultPrevented：PreventDefaultメソッドが呼び出されたかどうかを示すブール値を返します。
3。イベントのターゲットノードに関連しています。
CurrentTarget：イベント実行のリスニング関数にバインドされたノードを返します。
ターゲット：イベントをトリガーしたノードを返します。 IE6-IE8では、このプロパティの名前はターゲットではなく、srcelementです
4。イベントオブジェクトに関する他の情報に関連しています。
タイプ：イベントタイプを表す文字列を返します
詳細：イベントに関する情報を表す数値を返します。特定の意味は、イベントタイプに関連しています。マウスイベントの場合、マウスボタンが特定の位置で押される回数を意味します。たとえば、DBLClickイベントの場合、詳細属性の値は常に2です。
タイムスタンプ：ミリ秒のタイムスタンプを返し、イベントが発生した時期を示します。計算はperformancetiming.navigationstartから始まります。これは、ユーザーがWebページに移動するのにかかる時間を意味します。この値をUNIXエポックタイムスタンプに変換する場合は、event.timestamp + performance.timing.navigationStartを計算する必要があります。
ISTRUSTED：イベントが信頼できるかどうかを示すブール値を返します。あまり役に立たず、異なるブラウザのサポートは異なります。
イベントオブジェクトの方法：
PreventDefault（）：現在のイベントのブラウザのデフォルト動作をキャンセルします。この方法を有効にするための前提は、イベントのキャンセル可能なプロパティが真実であるということです。 falseの場合、この方法を呼び出すことは効果がありません。
StopPropagation（）：伝播プロセスのキャプチャ、ターゲット処理、またはバブルステージ中にさらに伝播するイベントを終了します。この方法を呼び出すと、イベントを処理するノード上のハンドラーが呼び出され、イベントは他のノードに発送されなくなります。注：この方法では、同じドキュメントノードの他のイベントハンドルが呼び出されるのを防ぐことはできませんが、イベントが他のノードに発送されないようにすることができます。
stopimmediatepropagation（）：他のリスニング関数が同じイベントで呼び出されるのを防ぎます。リスニング関数の1つがメソッドを呼び出す限り、もう1つのリスニング関数は再び実行されません。
参照リンク：
http://javascript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
権威あるJavaScriptガイド第6版
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。