【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イベントの例。