更新日: 2022年1月5日
公開日: 2020年2月3日

Ne:Code道場～JavaScript DOM⑤（イベント②）の巻～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMのイベントの学習ポイントについて紹介します。

はじめに
イベント引数ってなんだニャ？
イベント引数に入っている情報は何ニャ？
イベントの伝播ってどういうことニャ
イベント伝播の制御方法について教えてニャ
最後に

はじめに

この記事ではJavaScriptのDOMのイベントの2回目としてイベント引数について、概要について取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、DOMのイベントについて理解を深めてゆきましょう。

イベント引数ってなんだニャ？

前回の記事では、イベントについて概要を取り上げました。今回は、イベント実行時に活用することができる、イベント引数について見てゆきます。
例えば、前回の例で、ボタンクリック時のイベント登録の処理では、イベント引数は用いていません。引数を記載する丸カッコの中は空になっていますね。

document.getElementById("btn").addEventListener("click" , (/* ここに引数は書いてないニヤ */) => {
});

ですが、もしも、イベント引数を用いる場合は、引数を記載することで、利用する事が可能になります。引数名は任意の文言をつけることができますが、イベント情報を受け取るので、基本的には、「event」や、略して「e」などと命名されます。

document.getElementById("btn").addEventListener("click" , (event/* 引数を追加したニヤ */) => {
});

イベント引数に入っている情報は何ニャ？

イベント引数には、イベントに関連する情報が沢山入っています。ここでは、大きく２つの観点から見てゆきます。まずは１つ目として、「イベントを実行したDOM要素の取得」を見てゆきましょう。
今回の例では、ボタンがクリックされた際の意へ処理なので、「イベント引数.target」から、そのクリックイベントが実施されたボタンのDOM要素を取得出来ます。

document.getElementById("btn").addEventListener("click" , (event) => {
  num++;
  output.textContent = num;
  // クリックされたボタン要素を取得し、ボタンの文言を変更しているニャ
  event.target.textContent = `${num}に1増やすニャ`;
});

では、他の例でも見てみましょう。以下には入力された文字を「たぬき（た抜き）言葉（例:「ねこ」→「ねたこた」※ここでは、文字の後に必ず「た」を表示する形式で対応してゆきます）」で表示してゆくコードを記載してゆきます。まずはHTML側はこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <input type="text" id="message">
  <p>
    入力したメッセージのたぬき言葉は「
    <span id="output"></span>
    」だニャ
  </p>
  <script src="script.js"></script>
</body>
</html>

次に、JavaScript（script.js）のコードはこちらです。

// spanのDOM要素を取得しているニャ
let output = document.getElementById("output");

// 入力エリアのDOM要素を取得し、値入力時の処理を組み込んでいるニャ
document.getElementById("message").addEventListener("input" , (event) => {
    // 入力された値を取得しているニャ
    let value = event.target.value;
    // たぬき言葉を作成する用変数ニャ
    let tanuki = "";
    // 入力された文字分処理を行うニャ
    for (let char of value) {
        tanuki += `${char}た`;
    }
    // たぬき言葉を表示しているニャ
    output.textContent = tanuki;
});

「event.target.value」で、idがmessageになっている入力エリアに入力された値を取得していますね。追加でDOMを取得しなくても、イベント引数を活用することで、そのイベントが紐づけられているDOMに容易にアクセスできることを確認してゆきました。
　
では次に２つ目として、「イベントの伝播制御」について見てゆきましょう。

イベントの伝播ってどういうことニャ

例えばボタンのクリックイベントは、HTMLの構成によっては、クリックイベントにとどまらず、別のイベントに伝播してゆきます。具体例から見てゆきましょう。
HTML側は下記のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <!-- form要素で入力エリアを囲っているニャ -->
  <!-- お試しコードなので、action属性にはダミーの値として#を設定しているニャ -->
  <form action="#">
    <!-- 入力エリアに紐づけているラベルを配置しているニャ -->
    <label for="test">お試し入力エリアだニャ</label>
    <!-- 改行なしの入力エリアだニャ -->
    <!-- id属性に入っている値が、labelのforと紐付いているニャ -->
    <!-- 未入力だと動きを確認しにくので入力必須（required）属性をつけているニャ -->
    <input type="text" name="test" id="test" required>
    <!-- ボタンのメッセージどおり、入力してボタンを押して見るニャ -->
    <button id="btn">入力エリアに適当に値を入れて、ボタンを押すニャ</button>
    <!-- ボタンを押したあとは、この下に入力された文字を表示する予定になっているニャ -->
    <p>
      入力された文字は「
      <span id="output"></span>
      」だニャ
    </p>
  </form>
  <script src="script.js"></script>
</body>
</html>

先程のHTMLでは用いていなかったform要素が追加されているのが確認できますね。入力エリアに適当な文字を入力したあとボタンを押すと、入力エリアに入力された文字を下に表示するというHTMLの構成になっているのが確認できると思います。
その挙動を実現しようとしたJavaScript（script.jsの中身）はこちらです。※まずは参考として、イベントの伝播を考慮していないコードになっています。正しく動かないパターンとして見てゆきましょう。

// まずは、イベント引数を用いないパターンとして記載しているニャ
document.getElementById("btn").addEventListener("click", (/* なので、イベント引数は未記載ニャ */) => {
  // 参考コードなのでシンプルに1行でまとめたニャ
  // やっていることは、入力された値を出力用エリアに表示しているニャ
  document.getElementById("output").textContent = document.getElementById("test").value;
});

適当に入力エリアに文字を入れて、その上でボタンをクリックしてみても、出力部分に値が表示されないという動きを確認できると思います。（動体視力を活用することで、一瞬だけ出力エリアに表示されるというのを確認できているかもしれませんが。。！）
ボタンを押したあと、ブラウザの再読込マークの部分を注視していると、一瞬のことですが、再読込がされているというのを判別できるかもしれません。
form要素はその内側に配置された入力エリアに入力された情報を、裏方に送る目的で用いられる要素なので、ボタンクリックイベントが、その親である、form要素に伝播され、form要素のsubmitイベントを引き起こし、その結果画面の再読込が発生しているという動きになっています。
なのでJavaScriptの処理は正常に実行され、その結果出力エリアに入力された文字は表示されていますが、すぐに画面再読込が行われることにより、画面表示時に戻っているという動きになっていたのですね。

イベント伝播の制御方法について教えてニャ

イベントの伝播を制御するには、イベント引数の持っている「preventDefaultメソッド」を活用してゆきましょう。
とてもシンプルで、そのメソッドを呼び出せば、イベントの伝播における既定の振る舞い（ここでは、ボタンクリックイベントの伝播先のform要素におけるsubmitイベント）を止めることができます。

// イベント伝播を制御するパターンニャ
document.getElementById("btn").addEventListener("click", (event/* なので、イベント引数を記載しているニャ */) => {
  // イベントの伝播における既定の振る舞いを止めている処理が追加されているニャ
  event.preventDefault();
  document.getElementById("output").textContent = document.getElementById("test").value;
});

上記のように書き換えた状態で実行したら、入力エリアに入力した文字がボタンを押したあとも下に表示されているのを確認できるでしょう。
この例ではイベント処理の先頭で「event.preventDefault()」を実行していますが、実行する位置は特に問題になりません。一度でも「event.preventDefault()」が呼び出されれば、イベントの伝播における既定の振る舞いは実行されなくなるので、例えば、イベント処理の最後に書いたとしても同様に動作するというのがポイントですね。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

最後に

DOMのイベント引数について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

イベント引数を活用したい場合には、イベント処理に引数を追加するニャ
1. 特に用いない場合は、イベント引数は書かなくてOKニャ
2. 引数名は、イベント引数であることがわかる名前をつけてゆくニャ
3. イベント引数には有用な機能や情報がもり沢山だニャ（ここでは特に以下の２つを見ていったニャ）
イベントが実行された要素をイベント引数経由で取得可能ニャ
1. 「イベント引数.target」で取得できるニャ
2. わざわざ追加でDOM要素を取得しなくても、イベント引数を記載しさえすれば活用できるのは便利ニャ
イベントには伝播の仕組みがあり、イベント引数を活用するとその伝播の仕組みを制御してゆくことが可能ニャ
1. 「イベント引数.preventDefault()」でイベント伝播における既定の振る舞いを防ぐことができるニャ

DOMに関連して、5つ目の記事として、DOMのイベント引数について学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。