最近、ウェブサイトの特殊効果を作成するために毎日ウェブサイトを変更する必要があるため、JSの連絡先インシデントをたくさん見てきました。私はそれのごく一部を使用する方法しか知っていません。時々、私がそれを使用するときもかなり混oticとしています。今、私はそれを整理しました。参照のために、ウーリンネットワークプラットフォームと共有します！
1。JavaScriptイベントとは何ですか？
イベントは、JavaScriptアプリケーションの鼓動心と、すべてを接着する接着剤です。ブラウザ内のWebページとの特定の種類のやり取りがある場合、イベントが発生します。
イベントが特定のコンテンツをクリックしたり、特定の要素を通過したり、キーボードの特定のキーを押したりすることも、特定のWebページの読み込みやウィンドウのスクロール、ウィンドウサイズの変更など、Webブラウザーで発生するものでもあります。率直に言って、イベントはドキュメントまたはブラウザで発生する特定のインタラクションモーメントです！
JavaScriptを使用することにより、特定のイベントを聴き、特定のイベントがそれらに応じて発生することを指定できます。
2。イベントフロー
イベントフローでは、ページで受け入れられているイベントの順序について説明します。ブラウザ開発の初期段階では、2つの主要なブラウザメーカーIEとNetscapeが互いに戦い、不正行為の状況が発生しました。つまり、イベントフローの解釈は完全に反対の2つの定義を示しました。それが私たちがよく知っていることです：すなわちイベントバブル、Netscapeイベントキャプチャ。最初に写真を撮り、構造を簡単に見てみましょう。
1。イベントバブル
イベントバブルとは、イベントが最初に最も特定の要素（ドキュメントで最も深いネストレベルを持つノード）によって受信され、その後、最も特定のノード（ドキュメント）に段階的に伝播することを意味します（ドキュメント）。上記の図を使用して、テキストパーツをクリックすると、最初にテキストの要素によって受信され、次に段階的にウィンドウに伝播すること、つまり6-7-8-9-10のプロセスが実行されることを示します。
2。イベントキャプチャ
イベントキャプチャとは、イベントがより特定のノードで最初に受信されることを意味し、最も特定のノードが最終的にイベントを受信します。同様に、上記のモデルでは、テキストパーツをクリックすると、最初にウィンドウで受信され、次にテキスト要素に段階的に伝播します。つまり、1-2-3-4-5のプロセスが実行されます。
コードでどのように機能しますか？後で！
3. JavaScriptイベントを処理する3つの方法
イベントが発生したとき、私たちはそれに対処する必要があります。 JavaScriptイベントハンドラーを処理する主な方法は3つあります。
1。HTMLイベントハンドラー
つまり、次のコードなど、HTMLコードにイベントハンドラーを直接追加します。
<入力id = "btn" value = "button" type = "button" onclick = "showmsg（）;"> <script> function showmsg（）{alert（ "html add event processing"）; } </script>上記のコードから、イベント処理が要素に直接ネストされていることがわかります。これには問題があります。HTMLコードとJSの間の結合は強すぎます。ある日、JSのshowmsgを変更したい場合は、JSで変更するだけでなく、HTMLで変更する必要があります。 1つまたは2つの変更を受け入れることができますが、コードが10,000行のレベルに達すると、それを変更するのに人々とお金がかかります。したがって、この方法はお勧めしません。
2。DOM0レベルイベントハンドラー
つまり、指定されたオブジェクトにイベント処理を追加します。次のコードを参照してください。
<入力id = "btn" value = "button" type = "button"> <script> var btn = document.getElementById（ "btn"）; btn.onclick = function（）{alert（ "dom-level追加イベント処理"）; } btn.onclick = null; // btnのクリックイベントを削除する場合は、null </script>に設定します上記のコードから、dom0レベルのイベント、HTMLコード、JSコード間の結合がHTMLイベントハンドラーと比較して大幅に削減されていることがわかります。ただし、スマートプログラマーはまだ満足しておらず、それに対処するためのより簡単な方法を見つけたいと考えています。 3番目の方法を見てみましょう。
3。DOM2レベルイベントハンドラー
Dom2は特定のオブジェクトにイベントハンドラーを追加していますが、主に2つの方法が含まれます。これは、イベントハンドラーの指定と削除の操作（AddEventListener（）とRemoveEventListener（）を処理するために使用されます。それらはすべて3つのパラメーターを受け取ります。処理するイベント名、イベントハンドラーとしての関数、およびブール値（イベントがキャプチャステージで処理されるかどうか）、次のコードを参照してください。
<入力id = "btn" value = "button" type = "button"> <script> var btn = document.getElementById（ "btn"）; btn.addeventlistener（ "click"、showmsg、false）; //最後の値をfalseに設定します。つまり、キャプチャ段階で処理されません。一般的に、バブル処理は各ブラウザ関数showmsg（）{alert（ "dom-level add event Handler"）でより互換性があります。 } btn.removeeventListener（ "click"、showmsg、false）; //このイベントを削除する場合は、同じパラメーター</script>を渡す必要があります。ここでは、イベントを追加および削除するとき、最後の方法がより直接的でシンプルであることがわかります。ただし、Ma haixiangは、削除イベントを処理するときに、渡されたパラメーターが以前のパラメーターと一致する必要があることを皆に思い出させます。
4.イベントバブルとイベントキャプチャのプロセスと違い
そうは言っても、イベントのバブルとイベントキャプチャのプロセスを説明するためのコードを提供します。同時に、2つの違いを確認してください。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <title> document> document> #p {width：px; height：px; border：px solid black;}＃c {width：px; height：px; border：px solid red;} </sylie www.mahaixiang.cn <div id = "c">私はwww.mahaixiang.cn </div> </div> <script> var p = document.getElementbyId（ 'p'）; var c = document.getElementById（ 'c'）; C.AddeventListener（ 'Click'、function（）{alert（ 'Child Node Capture'）}、true）; c.addeventlistener（ 'click'、function（）{alert（ 'child node bubbles'）}、false）; p.addeventlistener（ 'click'、function（）{alert（ 'child node bubbles'）}、false）; </script> </body> </html>上記のコードを実行して子要素をクリックすると、実行の順序は次のことがわかります。親ノードキャプチャチルドノードキャプチャキャプチャノードバブル親ノードバブル。この例から、さらに、DOM2レベルのイベントは、イベントに3つの段階が含まれることを規定していることを理解できます。
1。イベントキャプチャステージ。
2。ターゲット段階。
3。イベントバブルステージ。
第一に、それはキャプチャであり、次にターゲット段階（つまり、イベントが発行される場所）で、最終的にバブルされます。非科学的なのは、DOM1レベルのイベント処理プログラムがないことです。注意を払い、冗談を言うのをやめてください！
5。サプリメント
1。IEイベントハンドラーには、AttachEvent（）がイベントを追加し、Detachevent（）を削除する2つの方法もあります。これらの2つの方法は、イベントハンドラー名とトランザクション処理機能の同じ2つのパラメーターを受け取ります。なぜここにブール値がないのですか？ IE8以前のバージョンはイベントバブルのみをサポートするため、最後のパラメーターはデフォルトでfalseに相当します。 （IEイベントハンドラーをサポートするブラウザには、IE、オペラが含まれます）。
2。イベントオブジェクトは、いくつかのイベントが発生したときに関連する情報を記録するために使用されるオブジェクトですが、イベントオブジェクトはイベントが発生したときにのみ生成され、イベントハンドラー関数によって内部的にのみアクセスできます。すべてのイベントハンドラー機能が実行された後、イベントオブジェクトが破壊されます！
上記は、編集者が紹介したJavaScriptイベント（3つのタイプ）を処理する方法です。それがあなたに役立つことを願っています！