JavaScriptのイベントリスナーの一覧と使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのイベントリスナーの一覧と使い方について解説しています。リスナーというのは視聴者の意味で使われます。つまりイベントリスナーとはイベントを監視するための仕組みになります。JavaScriptではユーザーの操作によってイベントを設定してインタラクティブにページなどを変化させることが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのイベントリスナーの一覧と使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

イベントリスナーの一覧と使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

イベントリスナーとは

Webページの読み込みや、Webページ上で行われる様々な動作(文字入力・ボタンクリック・マウスオーバーなど)を「イベント」と呼びます。

その、「イベント」が行われたことを検知して発動する処理(関数)のことを、「イベントリスナー」と呼びます。

イベントリスナーの種類と書き方

イベントを検知、処理を発動するためのメソッドとしてaddEventListener()を使用します。以下がaddEventListener()の構文になります。

対象要素.addEventListener( イベントの種類, 関数, boolean)
//一般的な使用方法としては、第二引数にそのまま関数を記述します(無記名関数)。
対象要素.addEventListener(イベントの種類, function() {
//対象要素に対して、指定したイベントが行われたときに発動する処理
}, false);

第一引数にはイベントの種類を記述しますが、イベントには非常に多くの種類があります。そのなかで、一般的に多用されているイベントリスナーの動作・書き方を記載していきます。

入力項目

change:入力値が変化したのを検知し発動
focus :入力項目がフォーカスを受け取ったのを検知し発動
blur :入力項目がフォーカスを失ったのを検知し発動
select:テキストフィールドで文字が選択されたのを検知し発動
submit:送信ボタンが押されたのを検知し発動
reset :リセットボタンが押されたのを検知し発動

 

マウス操作

click:ボタンをクリックしたときに発動
mousemove:カーソルが要素内に移動したときに発動
mouseover:カーソルが要素内に入ったときに発動
mousedown:ボタンを押下したときに発動
mouseup:ボタンを離したときに発動
mouseout:カーソルが要素外に出たときに発動

 

キーボード操作

keypress:キーを押して離したときに発動
keydown:キー押下時に発動
keyup:キーを離したときに発動

 

DOM処理

DOMFocusIn:ターゲットがフォーカスを受け取ったとき発動
DOMFocusOut:ターゲットがフォーカスを失ったとき発動
DOMActivate:ターゲットがアクティブになったとき発動

 

その他

load:読み込みが完了したときに発火
scroll:コントロール付属のスクロールバー位置が変更されたときに発火
resize:コントロールのサイズが変更されたときに発火

 

実際に書いてみよう

クリックイベントを検知してアラームを出してみます。

HTML

<div id="sample">ここを押す</div>

 

JavaScript

var elem = document.getElementById('sample');

elem.addEventListener('click', function() {
alert('「ここを押す」を押したよ');
}, false);

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。