JavaScript

最終更新日：
公開日：

レシピ

イベント

イベントリスナーを設定する

イベントが起こったときに指定した処理を実行するためのイベントリスナーの登録方法について解説します。

この記事のポイント

  • イベントリスナーは(1)対象、(2)イベントの種類、(3)実行する内容の3つを指定する
  • イベントリスナーは1回だけ実行する設定も可能

目次

イベントを検知して処理を実行する

ページの読み込みやクリック、スクロールなど、閲覧者はWebサイトで様々なアクションを行います。
それぞれのアクションに応じてブラウザは「イベント」を起こします。
イベントリスナーで予めあるイベントが起こったら実行する内容を登録しておくことで、閲覧者のアクションに応じて動的な処理を実行できるようになります。

次の例ではページの読み込みが完了したタイミングと、青いsection要素がクリックされたときの2つのイベントをイベントリスナーに登録しています。

ページの読み込み完了時にコンソール出力
ページの読み込み完了時
クリックするとメッセージ表示
クリックするとメッセージ表示

コードは以下のようになります。
赤字の箇所でイベントリスナーを使っています。

JS コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GRAYCODE JavaScript</title>
	<script>
	// 1.ページを読み込んだとき
		window.addEventListener('load', function(){

			console.log("ページが読み込まれました。");

			// 2.<section id="content1"></section>をクリックしたとき
			document.getElementById("content1").addEventListener('click', function(){
        alert("Hello, how are you??");
      });
		});
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>

以降はイベントリスナーに登録する方法を解説していきます。

イベントリスナーを使う

まず、イベントリスナーの登録はaddEventListenerメソッドを使って行います。
先述したコードでは2回addEventListenerメソッドを実行していますが、まずは1つ目をみていきましょう。

JS コード例

window.addEventListener('load', function(){ 実行する内容 }

こちらのaddEventListenerメソッドではイベントが発生する(1)対象、(2)イベントの種類、(3)実行する内容を順に指定しています。

イベントが発生する(1)対象はaddEventListenerメソッドの前に指定します。
上のコードではwindow(windowオブジェクト)が該当します。
このwindowオブジェクトは特定のHTML要素ではなくページそのものを指します。
2つ目のイベントリスナーでは(1)対象としてid属性「content1」を持つsection要素を指定しています。

JS コード例

document.getElementById("content1").addEventListener('click', function(){ 実行する内容 }

続いて、(2)イベントの種類と(3)実行する内容はaddEventListenerメソッドの第1パラメータ、第2パラメータとして指定していきます。
1つ目のイベントリスナーはページ読み込み完了時に発生するイベント「load」を指定し、2つ目はクリックされたときに発生するイベント「click」を指定しています。

第2パラメータには(3)実行する内容を指定しますが、今回は無名関数で実行するコードをそのまま書いています。
1つ目のイベントリスナーではconsole.logメソッドと、2つ目のイベントリスナーの登録の2種類の処理を実行しています。
loadはページに必要なリソースが読み込まれた後であるため、このように他のイベントリスナーを登録する用途で使用することが非常に多いイベントです。

第2パラメータの実行内容はメソッドを指定することも可能です。
先述のコードであれば、以下のように書き換えても全く同じ動作になります。

JS コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GRAYCODE JavaScript</title>
	<script>
    // 1.ページを読み込んだとき
    window.addEventListener('load', function(){

			console.log("ページが読み込まれました。");

			// 2.<section id="content1"></section>をクリックしたとき
			document.getElementById("content1").addEventListener('click', sayHello);
		});

		function sayHello() {
			alert("Hello, how are you??");
		}
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>

2つ目のイベントリスナーで「実行する内容」をsayHelloメソッドに変更しました。
sayHelloメソッドはすぐ下で記述していますが、内容は全く同じです。

イベントリスナーを1回のみ設定する

addEventListenerメソッドは第3パラメータにオプションを指定することができ、onceをtrueにするとイベントリスナーを1回だけ実行するように設定することが可能です。

例えば、先ほどのコードにonceを指定するとsayHelloメソッドは1回目のクリックのみ実行し、2回目以降は何も起こらなくなります。

JS コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GRAYCODE JavaScript</title>
  <script>

    var option = {
      once: true
    };

    // 1.ページを読み込んだとき
    window.addEventListener('load', function(){

			console.log("ページが読み込まれました。");

			// 2.<section id="content1"></section>をクリックしたとき
			document.getElementById("content1").addEventListener('click', sayHello, option);
		});

		function sayHello() {
			alert("Hello, how are you??");
		}
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>

イベントリスナーに登録する前に、変数optionに配列でオプションの設定内容を記述します。
そして、イベントclickのイベントリスナーで第3パラメータにオプションを渡せば設定完了です。

使用できるオプション

オプションは先ほどのonceを含めた3種類が用意されています。
いずれも値はBoolean型のtrueで設定が有効になり、falseで無効になります。（初期値は全てfalse）

オプション設定内容
onceイベントリスナーを1回のみ実行する。
capture親要素に設定されたイベントリスナーを子孫要素にも適用するか指定。
passive第2パラメータの「実行する内容」でpreventDefault()を実行しないことを明示的に指定すr。

オプションcaptureは、マウスカーソルがHTML要素の上に乗ったときのイベントmouseenterや離れたときのイベントmouseleaveで使用することが多いです。
オプションを指定したときの挙動について詳しくは別ページ「マウスの各操作に対応したイベント一覧」の「カーソルがHTML要素に乗ったとき、離れたときに処理を実行する その1」をご覧ください。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

関連記事

前のページへ 一覧に戻る 次のページへ