【JavaScriptの基本】さまざまなシーンで行われるイベントの作り方

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

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

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

イベントとは

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

イベントハンドラ

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

イベントハンドラの一覧

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

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()」という関数を紐付けていることがわかります。

つぎに、JavaScriptに記述されている関数をみてみましょう。
changeText関数の中で、DOM操作で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」というメソッドを繋げ、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イベントを記述し、第二引数にはイベントが起こった時に呼ぶ関数名を指定します。（イベントハンドラの「on」を取った形でイベントを指定）

その結果、ボタンをクリックすると、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