JavaScriptでのaddEventListenerの使用方法とは?イベントに合わせた処理を実行する方法を紹介!

JavaScriptでのaddEventListenerの使用方法とは?イベントに合わせた処理を実行する方法を紹介!のアイキャッチイメージ

JavaScriptでのaddEventListenerの使い方とは?


今回は、JavaScriptでのaddEventListenerの使い方について説明します。addEventListenerを使えば、イベントに合わせた処理を実行できます。ここでは、click/mousemove/keydown/keyup/input/changeイベントのaddEventListenerを紹介します。

JavaScriptでのaddEventListenerの使い方に興味のある方はぜひご覧ください。

clickイベント

addEventListenerのclickイベントの使い方について紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
addEventListener1
by kskumd (@kskumd)
on CodePen.

mousemoveイベント

addEventListenerのmousemoveイベントの使い方について紹介します。HTMLは以下のように記述します。

CSSは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
addEventListener2
by kskumd (@kskumd)
on CodePen.

keydown/keyupイベント

addEventListenerのkeydown/keyupイベントの使い方について紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
addEventListener3
by kskumd (@kskumd)
on CodePen.

input/changeイベント

addEventListenerのinput/changeイベントの使い方について紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。inputイベントはリアルタイムにイベントが発生しますが、changeイベントはフォーカスを外した時にイベントが発生します。

See the Pen
addEventListener4
by kskumd (@kskumd)
on CodePen.

まとめ

いかがでしたでしょうか。JavaScriptでのaddEventListenerの使い方について説明しました。addEventListenerを使えば、イベントに合わせた処理を実行できます。ここでは、click/mousemove/keydown/keyup/input/changeイベントのaddEventListenerを紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

インフラエンジニア専門の転職サイト「FEnetインフラ」

FEnetインフラはサービス開始から10年以上『エンジニアの生涯価値の向上』をミッションに掲げ、多くのエンジニアの就業を支援してきました。

転職をお考えの方は気軽にご登録・ご相談ください。