JavaScriptには、キーボードやマウス操作のタイミングで、任意の処理と紐付けるイベントという機能があります。

例えば、「キーボードを打つと音がなる」「スクロールすると画面が切り替わる」といった処理もイベントが使われています。

そこで今回は、ユーザーのさまざまなアクションによって行われるイベントについて解説していきます。

イベント

イベントとは、Webページ上で発生するアクションのことです。
マウスのクリックやカーソルを合わせる動き、キーボードでの入力、ページの読み込みなど、ユーザーが行うさまざまな動作を指します。

イベントハンドラ

JavaScriptには、イベントハンドラというものが用意されています。
イベントハンドラを使うと、ユーザーが「どのような操作をしたら」処理を実行させるか指定することができます

イベントハンドラの一覧

イベントハンドラはたくさんの種類があります。以下が代表的なイベントハンドラです。

  • onclick:要素がクリックされた時
  • onmouseover:要素にカーソルを置いた時
  • onchange:要素の内容が変わった時
  • ondrag:要素がドラッグされた時
  • onsubmit:フォームが送信された時
  • onkeypress:キーを押した時
  • onload:ページが読み込まれた時 など

イベントハンドラの使い方

では、実際にイベントハンドラを使ってみましょう。

HTMLの要素に属性としてイベントハンドラを用意し、どのような処理を行うかをJavaScriptに記述します。
まずは、良く使われるonclickというクリックイベントを使用した例です。

HTML

<p id="text">イベントハンドラを使ってみる</p> 
<button id="button" type="button" onclick="changeText()">ボタン</button>

JavaScript

function changeText () { 
  const getText = document.getElementById('text'); 
  getText.innerHTML = 'ボタンを押しました'; 
}

ボタンクリック前
JavaScript event

ボタンクリック後
JavaScript event

ボタンをクリックすると、「イベントハンドラを使ってみる」というテキストが、「ボタンを押しました」というテキストに変更されました。

HTMLの<button>タグを確認すると、onclick="changeText()"という記述があります。
button要素にonclick属性を配置するという意味です。また、chengeText()という関数を紐付けていることが分かります。
これによって、ボタンをクリックするとchangeText関数を呼び出すことができます。

次に、JavaScriptに記述されている関数の確認です。
changeText関数の中で、textというid属性を持った要素を取得し、その要素に'ボタンを押しました'というテキストを入れ込む処理が書かれています。
その結果、ボタンをクリックすると、chengeText関数の処理が呼び出され、テキストが変更されます。

もう一つ、マウスイベントのonmouseoverを使用した例も見てみましょう。

HTML

<p>青い丸にカーソルを当ててください</p> 
<div id="blue-circle" onmouseover="mouseOver()"></div>

CSS

#blue-circle { 
  color: #fff; 
  background-color: blue; 
  width: 200px; 
  height: 200px; 
  line-height: 200px; 
  border-radius: 50%; 
  text-align: center; 
}

JavaScript

function mouseOver() { 
  const getBlueCircle = document.getElementById('blue-circle'); 
  getBlueCircle.innerHTML = 'カーソルを置きました'; 
}

カーソルを置く前
JavaScript event

カーソルを置いた後
JavaScript event

HTML内の<div>タグにonmouseover="mouseOver()"と記述し、イベントハンドラの配置と関数への紐付けを行っています。
その結果、青い丸にマウスのカーソルを当てると、mouseOver関数が呼び出され、「カーソルを置きました」というテキストが表示されます。

イベントリスナー

イベント処理には、イベントハンドラを使用する以外に、イベントリスナーを使用することも可能です。
イベントハンドラとの違いは、HTMLの要素に属性を与えず、要素の指定やイベント処理の内容をJavaScript側で登録するという点です。

関数としてイベントの機能を保持することができるため、再利用性が高いことが特徴です。
また、同じ要素に複数のイベントを登録することができるため利便性も高いです。

イベントリスナーの使い方

イベントリスナーの構文は以下です。

要素.addEventLisner('イベント名', 関数名);

イベントを発火させる要素とaddEventListnerというメソッドを繋げ、引数にイベント名と関数名を記述します。

イベントハンドラの方でも実装したボタンクリックを例に見ていきましょう。

HTML

<p id="text">イベントリスナーを使ってみる</p> 
<button id="button" type="button">ボタン</button>

JavaScript

const getButton = document.getElementById('button'); 
getButton.addEventListener('click', changeText); 

function changeText() { 
  const getText = document.getElementById('text'); 
  getText.innerHTML = 'ボタンを押しました'; 
}

ボタンクリック前
JavaScript event

ボタンクリック後
JavaScript event

イベントハンドラを使っても、イベントリスナーを使っても、得られる結果は同じです。

以下のコードに注目してください。

getButton.addEventListener('click', changeText);

要素を取得したgetButtonという変数に、addEventLisnerというイベント処理を行うためのメソッドを繋げています。
また、addEventLisnerの第一引数にはclickイベントを記述し、第二引数にはイベントが起こった時に呼ぶ関数名を指定します。

その結果、ボタンをクリックすると、changeText関数が呼び出され、「ボタンを押しました」というテキストに変更されます。

さいごに、同じボタンに別イベントmouseoverを追加するパターンも見てみましょう。

const getButton = document.getElementById('button'); 
getButton.addEventListener('mouseover', changeButtonText); 
getButton.addEventListener('click', changeText); 

function changeButtonText() { 
  getButton.innerHTML = 'ボタンを押してください'; 
} 

function changeText() { 
  getButton.innerHTML = 'ボタンを押しました'; 
}

イベント前
JavaScript event

ボタンにカーソルを置いた後
JavaScript event

ボタンをクリックした後
JavaScript event

ボタンにclickmouseoverという2種類のイベントが付与されています。
その結果、ボタンにカーソルを合わせると、ボタンのテキストが「ボタンを押してください」と切り替わり、さらにボタンをクリックすると、「ボタンを押しました」と切り替わります。

このようにイベントリスナーでは、同じ要素に複数のイベント処理を登録することができます。

まとめ

今回は、JavaScriptにおけるイベントについて解説しました。

イベントが特定のものと決まっている場合は、シンプルに記述できるイベントハンドラを使用し、複数のイベントを登録したい場合やメンテナンス性を考慮する場合は、イベントリスナーを使うと良いでしょう。

さまざまな場面で利用されている汎用性の高いイベント。今後も積極的に活用していきましょう。

イベントの関連記事

DOMの仕組みと構造