jQuery addEventListener

今日の記事では、jQuery の addEventListener 関数について学習します。

jQuery の AddEventListener

JavaScript は、EventTarget インターフェースの組み込み addEventListener() メソッドを提供します。このメソッドは、指定されたイベントがターゲットに送信されるたびに呼び出される関数を構成します。

jQuery は、.on() と呼ばれる同等のメソッドを提供します。JavaScript の addEventListener メソッドと同様に、.on() メソッドは、1つ以上のイベントの選択された要素にイベントハンドラー関数をアタッチします。

構文：

.on( events [, selector ] [, data ], handler )

1. Events は、スペースとオプションの名前空間（Click や keydown.myPlugin など）で区切られた、1つ以上のイベントタイプを表す文字列です。
2. selector は、イベントをトリガーする選択された要素の子孫をフィルタリングするための選択/一致文字列を表します。selector が渡されないか null の場合、選択された要素に到達するたびにイベントがディスパッチされます。
3. イベントが発生すると、data が event.data でコントローラーに渡されます。
4. handler は、イベントが発生したときに実行される関数です。handler 関数が null を返す場合、false 値もショートカットとして許可されます。

現在選択されているアイテムに、jQuery の .on() メソッドがイベントハンドラーをオブジェクトにアタッチします。 .on() メソッドは、イベントハンドラーをアタッチするためのすべての機能を提供します。

イベント引数には、任意のイベント名を使用できます。jQuery は、ブラウザーの標準 JavaScript イベントタイプを反復/ループし、イベントをトリガーする .click などのユーザーアクションが原因でブラウザーが失敗すると、handler 関数を呼び出します。

.trigger() 手法を使用すると、標準のブラウザーイベント名とカスタムイベント名で接続されたハンドラーを呼び出すこともできます。イベント名には、最高の英数字、アンダースコア、およびコロンを組み込む必要があります。

次の簡単な例でそれを理解しましょう。

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {
  console.log("Click event is fired.")
})

上記のコードスニペットでは、ボタンを定義しています。ユーザーがボタンをクリックすると、click イベントがディスパッチされ、handler 関数が呼び出されます。

これは、on('click') メソッドを内部的にトリガーする .click() メソッドに似ています。

jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。以下の結果が表示されます。

"Click event is fired."

デモ