JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptイベント入門：イベントを作成する3つの方法を徹底解説

Webサイトにインタラクティブな機能を追加できるのは、JavaScriptの大きな強みです。HTMLがページの構造を、CSSがスタイルを担当するのに対し、JavaScriptを使えばサイトにより動的な振る舞いを持たせることができます。

JavaScriptでは、イベント（event）を使ってサイトにインタラクティブ性を持たせます。この記事では、JavaScriptイベントの基本について解説します。イベントの活用シーン、定義方法、呼び出し方まで、順を追って見ていきましょう。

JavaScriptイベントとは？

イベントは、ブラウザまたはユーザーによって発生し、Webページの状態を変化させることができます。たとえば、Webページ上のボタンをクリックするとJavaScriptイベントが発生します。クリックすると展開されるドロップダウンメニューも、JavaScriptイベントによって実現されています。

JavaScriptイベントの主な用途には、次のようなものがあります。

  • フォームが正しく入力されているかどうかのチェック
  • フォーム送信後にユーザーを別のページへ遷移させる
  • ドロップダウンメニューにインタラクティブな動作を追加する
  • 画像の拡大・縮小機能を実装する

JavaScriptでイベントを扱うには、「イベントハンドラ」と「イベントリスナー」という2つの概念を理解しておく必要があります。

イベントハンドラは、Webページ上でイベントが発生したときに実行される関数です。イベントリスナーは、イベント関数をHTML要素に結び付ける役割を担い、関数が実行されると該当する要素が変化します。

イベントハンドラの定義方法は3つあります。インラインイベントハンドラ、イベントハンドラプロパティ、そしてイベントリスナーです。それぞれ順番に見ていきましょう。

1. インラインイベントハンドラ

JavaScriptでイベントを使い始める最も簡単な方法が、インラインイベントハンドラです。これは、イベントをHTMLファイル内に直接記述する方法です。

ここでは、パン屋「JJ Smith's Bakery」のWebサイトを例に考えてみましょう。ユーザーがフォームを送信したときに、「Response received.（応答を受け付けました）」というテキストを表示したいとします。

まず、次のようなHTMLコードを用意します。

<!DOCTYPE html>
<html>
	<head>
		<title>JJ Smith's Bakery</title>
	</head>

	<script src="main.js"></script>

	<body>
		<p id="submitted"></p>
		<button onclick="submitForm()">Submit form</button>
	</body>
</html>

このコードを表示すると、ボタンが1つ置かれたシンプルなページになります。しかし現時点では、ボタンをクリックしても何も起こりません。まだイベントハンドラを書いていないからです。

そこで、main.jsファイルに以下のコードを追記しましょう。

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

このコードは、IDが「submitted」の要素を取得し、その内容を「Form submitted.」に書き換えます。処理が実行されるのは、submitForm()関数が呼び出されたときだけです。この関数は、ユーザーがボタンをクリックしたタイミングで実行されるよう設定されています。

ボタンをクリックすると、画面には「Form submitted.」というメッセージが表示されます。これで、インラインイベントハンドラを使ってWebページにインタラクティブ性を持たせることができました。

ただし、インラインイベントハンドラが唯一の方法ではありません。次に、イベントハンドラプロパティを使う方法を見ていきます。

2. イベントハンドラプロパティ

インラインハンドラでは、HTMLファイル内で実行する関数を指定する必要があります。先ほどのコードでは、次の行でボタンが押されたときに呼び出す関数を定義していました。

<button onclick="submitForm()">Submit form</button>

ハンドラプロパティを使えば、この「onclick」属性をHTMLから取り除くことができます。そうすることで、インタラクティブな動作を担うJavaScriptコードをすべて独立したファイルにまとめられます。

今回の例では、JavaScriptコード内でボタンを特定できるよう、ボタンに「button」というIDを割り当てます。onclick属性を削除し、代わりにIDを設定したコードがこちらです。

<button id="button">Submit form</button>

ボタンが押されたときにイベントを発火させるため、main.jsファイル内でハンドラプロパティを使ったイベントを記述します。

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

このコードを実行してボタンをクリックすると、先ほどと同じようにメッセージが表示されます。

動作は前の例とまったく同じですが、コードの書き方が変わっています。イベントハンドラをHTML内にインラインで書く代わりに、main.jsファイルへ移動しました。こうすることで、HTMLコード全体を読み返してインラインイベントの場所を探す必要がなくなり、保守性の高いコードを書けるようになります。

3. イベントリスナー

JavaScriptでイベントを宣言するもう1つの方法が、イベントリスナーです。リスナーは常に要素の状態変化を監視しており、変化を検知すると、登録されているコードを実行します。

たとえば、イベントリスナーが登録されたボタンをクリックすると、リスナーはマウスイベントの発生を「聞き取って」、そのイベントに関連付けられたコードを実行します。

HTMLコードは前の例と同じまま、main.jsファイルに少し変更を加えます。

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

このコードでは、addEventListenerを使ってイベントリスナーを作成しています。これまでの2つの例のように、submitForm()関数をonclickイベントに結び付ける代わりの方法です。

第1引数に「click」を指定することで、マウスでボタンがクリックされたときをリッスンするよう指示しています。クリック以外にもキーボードイベントなどさまざまなイベントタイプがありますが、このチュートリアルではマウスクリックイベントに焦点を当てます。

それでは、コードを実行してボタンをクリックしてみましょう。

出力結果はこれまでの2つの例と同じですが、今回はHTMLイベントリスナーを使用しています。イベントリスナーはJavaScriptでイベントを宣言する最も新しい方法であり、実際の開発でも最も広く使われている手法です。

まとめ

JavaScriptイベントを使えば、Webページにインタラクティブな動きを加えられます。ボタンのクリック、フォームの送信、テキストのホバーなど、さまざまな操作をきっかけにイベントを発生させられます。JavaScriptでイベントを宣言する方法は、インライン、プロパティ、リスナーの3つがあります。

これで、あなたもプロのWeb開発者のように、JavaScriptでイベントを作成できるようになりました！

  1. JavaScriptのスクロールイベントとは？基本の使い方をサンプルコードで解説

    JavaScriptにおけるスクロールイベント（scroll event）は、ユーザーがスクロールバーを上下に操作したときに発生するイベントです。ページのスクロール位置に応じて処理を実行したい場合に活用される、非常に重要なイベントのひとつです。 スクロールイベントの基本的な仕組み スクロールイベントは、windowオブジェクトやスクロール可能な要素に対してaddEventListener()メソッドを使って登録できます。スクロールが行われるたびに、登録した関数が繰り返し呼び出される仕組みになっています。 以下は、JavaScriptでスクロールイベントを使用したサンプルコードです。 サンプルコ

  2. JavaScriptで配列を空にする4つの方法【サンプルコード付きで解説】

    JavaScriptで配列を空にする方法は、主に4つあります。それぞれ動作の仕組みや特徴が異なるため、目的に応じて適切な方法を選ぶことが大切です。配列を空にする4つの方法新しい空の配列を代入する：配列変数に、新しく作成した空の配列を代入します。最もシンプルな方法ですが、元の配列を参照している他の変数が残る点には注意が必要です。lengthプロパティを使う：配列のlengthプロパティに0を設定するだけで、すべての要素を削除できます。高速で、元の配列への参照も維持されるため、実務で最もよく使われる方法のひとつです。popメソッドを使う：配列の要素数が0になるまで、popメソッドで末尾の要素を繰り