イベントはの重要な部分です 。Webページは、発生したイベントに従って応答します。一部のイベントはユーザーが生成し、一部はAPIによって生成されます。この記事では、イベントがどのように発生するか、JavaScriptのメソッドaddEventListenerが次の順序でどのように使用されるかを確認します。
イベントリスナーとは何ですか？
イベントリスナーは、イベントの発生を待機するJavaScriptのプロシージャです。の簡単な例 イベント ユーザーがマウスをクリックするか、キーボードのキーを押すことです。
ザ・ addEventListener（） 作り付けです JavaScript関数 これは、リッスンするイベントと、記述されたイベントが発生するたびに呼び出される2番目の引数を取ります。既存のイベントハンドラーを上書きすることなく、任意の数のイベントハンドラーを単一の要素に追加できます。
JavaScriptのaddEventListener（）
いくつかの 特徴 イベントリスナーメソッドの内容は次のとおりです。
- ザ・ addEventListener（） メソッドは添付します イベントハンドラ 指定された要素に。
- このメソッドは、イベントハンドラーを要素にアタッチします。 上書き 既存のイベントハンドラー。
- あなたは付け加えられます 多くのイベントハンドラー 1つの要素に。
- の多くのイベントハンドラーを追加できます 同じタイプ 1つに 素子 、つまり2つの「クリック」イベント。
- イベントリスナーは、任意のに追加できます 判定 HTML要素だけでなくオブジェクト。つまり、ウィンドウオブジェクトです。
- addEventListener（）メソッドはそれを作ります より簡単に どのように制御する イベントが反応します バブリングに。
addEventListener（）メソッドを使用する場合、JavaScriptは マークアップ。読みやすくするため、HTMLマークアップを制御していない場合でもイベントリスナーを追加できます。
また、を使用してイベントリスナーを簡単に削除できます removeEventListener（）メソッド 。
構文：
target.addEventListener（type、listener [、options]）target.addEventListener（type、listener [、useCapture]）target.addEventListener（type、listener [、useCapture、wantsUntrusted]）
パラメータ値
| パラメータ | 説明 |
イベント | 必須。イベントの名前を指定する文字列。 注：「on」プレフィックスは使用しないでください。たとえば、「onclick」の代わりに「click」を使用します。 すべてのHTMLDOMイベントのリストについては、完全なHTMLDOMイベントオブジェクトリファレンスを参照してください。 ソルトスタックvsパペットvsシェフ |
関数 | 必須。イベントが発生したときに実行する関数を指定します。 イベントが発生すると、イベントオブジェクトが最初のパラメーターとして関数に渡されます。イベントの種類 オブジェクト 指定されたイベントによって異なります。たとえば、「クリック」イベントはMouseEventオブジェクトに属します。 |
useCapture | オプション。イベントをキャプチャフェーズで実行するか、バブリングフェーズで実行するかを指定するブール値。 可能な値：true –イベントハンドラーはキャプチャフェーズで実行されますfalse-デフォルト。イベントハンドラーはバブリングフェーズで実行されます |
イベントリスナーがどのように機能するかがわかったところで、JavaScriptのaddEventListener（）の例を見てみましょう。
JavaScriptのaddEventListener（）：例
＆lt！DOCTYPE html＆gt＆lthtml＆gt＆ltbody＆gt＆ltp＆gtこの例では、addEventListener（）メソッドを使用して、ユーザーがボタンをクリックしたときに関数を実行します。＆lt / p＆gt＆ltbutton id = 'myBtn'＆gtTry it＆lt / button＆gt＆ltp id = 'demo'＆gt＆ltscript＆gt document.getElementById （ 'myBtn'）。addEventListener（ 'click'、myFunction）function myFunction（）{document.getElementById（ 'demo'）。innerHTML = 'Hello World'}＆lt / script＆gt＆lt / body＆gt＆lt / html＆gt 
これで、JavaScriptでのこのaddEventListenerが終了します。イベントリスナーがどのように 方法 JavaScriptで動作します。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「JavaScriptのaddEventListener」ブログのコメントセクションでそれについて言及してください。折り返しご連絡いたします。