【JavaScript】addEventListenerの利用例まとめ｜イベントが発生した際に関数を実行
今回は当サイトに掲載している記事の中で、JavaScriptのaddEventListenerメソッドを利用した例のまとめとなります。
【JavaScript】addEventListenerの利用例まとめ
EventTarget のaddEventListenerメソッドは、イベントリスナーとしてコールバック関数を指定することで、指定したイベントが発生した際に関数を実行できます。
以下、それぞれのイベントの例となります。
マウスのクリック（clickイベント）
要素をクリックした場合に発生するclickイベントの例。
- タブ切り替えメニューを実装する方法
- スライドメニューを実装する方法
- オーバーレイを実装する方法
- クリック時に数秒間だけ表示する要素を実装する例
- setInterval()・setTimeout()を解除する方法
- クリックイベントを複数の要素に適用させる例
スクロール時（scrollイベント）
ウィンドウをスクロールした際に発生するscrollイベントの例。
セレクトボックスの値を変更（changeイベント）
input・select・textareaの値を変更した場合に発生するchangeイベントの例。
画面サイズの変更（changeイベント）
画面サイズ変更した場合に発生するchangeイベントの例
コンテキストメニューの表示（contextmenuイベント）
マウスの右クリックなど、コンテキストメニューを表示する場合に発生するcontextmenuイベントの例
フォーカス関連（focusイベント・blurイベント）
ウィンドウや要素をフォーカスした場合に発生するfocusイベント、フォーカスを外した場合に発生するblurイベントの例。