【JavaScript】addEventListenerの利用例まとめ|イベントが発生した際に関数を実行

今回は当サイトに掲載している記事の中で、JavaScriptのaddEventListenerメソッドを利用した例のまとめとなります。

【JavaScript】addEventListenerの利用例まとめ

EventTarget のaddEventListenerメソッドは、イベントリスナーとしてコールバック関数を指定することで、指定したイベントが発生した際に関数を実行できます。

以下、それぞれのイベントの例となります。

マウスのクリック(clickイベント)

要素をクリックした場合に発生するclickイベントの例。

スクロール時(scrollイベント)

ウィンドウをスクロールした際に発生するscrollイベントの例。

セレクトボックスの値を変更(changeイベント)

input・select・textareaの値を変更した場合に発生するchangeイベントの例。

画面サイズの変更(changeイベント)

画面サイズ変更した場合に発生するchangeイベントの例

コンテキストメニューの表示(contextmenuイベント)

マウスの右クリックなど、コンテキストメニューを表示する場合に発生するcontextmenuイベントの例

フォーカス関連(focusイベント・blurイベント)

ウィンドウや要素をフォーカスした場合に発生するfocusイベント、フォーカスを外した場合に発生するblurイベントの例。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。