最新版！JavaScript入門講座ーDOMのInputイベントについて詳しく解説！

皆さんが普段使用しているTwitterやYoutubeのようなWebアプリにはボタンを押したり、文字を入力したりする機能が与えられています。その時、様々な動作がwebでなされています。

それらはもちろん、JavaScriptによるDOM操作によって実現されています。それらはユーザの操作によっておこるイベント処理がそのうちの一部です。今回は、そのイベント処理の中でも、ユーザが文字や数字を入力する際に発生するInputイベントについての解説を行っていきます。

本記事のペルソナ

JavaScript初学者の方
DOMを学んでいる方
Inputイベントについて学びたい方

Inputイベント処理の解説
1. イベント処理を扱う(addEventListener)
2. inputイベントのサンプル
まとめ
参考文献

Inputイベント処理の解説

では、早速ですがInputイベントについての解説をしていきます。今回は段階を踏み、最初にどのようなメソッド、あるいはプロパティを使うのかを解説します。

イベント処理を扱う(addEventListener)

さて、文字や数字を入力したという判定をJavaScriptでどのように表現するのか？そこがポイントになってきます。

それについては、専用のメソッドが用意されています。

書き方

let 変数名;

const メソッド名 = () =>{
処理;
}

変数名.addEventListener(‘input’,メソッド名);

addEventListenerこそが、今回扱うものになります。これはあらかじめ用意されている標準メソッドになります。引数は2つ取ります。最初に’input’が入ります。こちらは、’input’以外にも様々な文字列が入ります。

これはいろいろな使い方ができるとても便利なメソッドになってくるのでしっかりとチェックしておきましょう。

2つ目の引数には自分で定義するメソッド名が入ります。そのメソッドに実行したい処理を記述します。これで、ユーザが入力したときに処理を起こせます。

inputイベントのサンプル

では、実際にサンプルコードで見ていきましょう。
まずは例のごとく、HTMLファイルを生成します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div>
            <div id="js-event1">
                <p>
                    <label for="lab-ques1">
                        Q1 あなたが興味がある都道府県は？ :  
                    </label>
                    <input type="text" id="js-input1" name="lab-ques1" placeholder="北海道" /> 
                </p>
            </div>
            <div id="js-event2">
                <p>
                    <label for="lab-ques2">
                        Q2 あなたが行ってみたい国は？ : 
                    </label>
                    <input type="text" id="js-input2" name="lab-ques2" placeholder="デンマーク" />
                </p>
                <p>
                    <label for="lab-ques3">
                        Q3 あなたが普段使う鉄道は？ : 
                    </label>
                    <input type="text" id="js-input3" name="lab-ques2" placeholder="JR 函館本線" />
                </p>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

文字や数字を入力するテキストボックスを作るには、inputタグを使います。HTMLについてもっと詳しく知りたい方は、MDNのサイトを参考にしてみてください。
今回はテキストボックスを3つ用意しています。

続いて、JSファイルを用意しましょう。

const doc = document;
const in1 = doc.getElementById("js-input1");
const in2 = doc.getElementById("js-input2");
const in3 = doc.getElementById("js-input3");

const onInputEvent1 = ()=> {
    console.log("\n---- Q1 ----");
    console.log(`${in1.value}`);
}

in1.addEventListener('input',onInputEvent1);


const onInputEvent2 = ()=> {
    console.log("\n---- Q2 ----");
    console.log(`${in2.value}`);  
}

in2.addEventListener('input',onInputEvent2);

const onInputEvent3 = ()=> {
    console.log("\n---- Q3 ----");
    console.log(`${in3.value}`);  
}

in3.addEventListener('input',onInputEvent3);

これらが用意できましたら、早速ブラウザでHTMLファイルとディベロッパー・ツールを開いてみましょう。
このサンプルは文字を入力するとそのたびに出力されていくものです。3つのテキストボックスにそれぞれidが振られており、DOMでもそれぞれ対応する要素を取得しています。

コンソールを開きながら、テキストボックスに文字を入力してみてください。入力されているたびに、テキストボックス内の文字が出力されていることがわかると思います。
これが、Inputイベントになります。

このイベント処理を実行するメソッドは様々な場面で使用することができる汎用性の高いものなので、これだけはしっかりと抑えておきましょう。