JavaScript change イベント

概要: このチュートリアルでは、入力テキスト、ラジオボタン、チェックボックス、セレクト要素のJavaScript change イベントについて学習します。

change イベントは、要素の変更が完了したときに発生します。

要素のchangeイベントにイベントハンドラをアタッチするには、addEventListener() メソッドを呼び出すか

element.addEventListener('change', function(){
    // handle change
});Code language: JavaScript (javascript)

要素のonchange 属性を使用します。例:

<input type="text" onchange="changeHandler()">Code language: HTML, XML (xml)

ただし、addEventListener() メソッドを使用することをお勧めします。

入力要素に対するJavaScript changeイベントの使用

<input> 要素のchangeイベントは、<input> 要素がフォーカスを失ったときに発生します。入力中はchange イベントは発生しません。

次の例は、入力テキストがフォーカスを失ったときの値を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Input Element</title>
</head>
<body>
    <label for="message">Message:</label>
    <input type="text" class="input" id="message" name="message">
    <button>Submit</button>
    <p id="result"></p>
    <script>
        let input = document.querySelector('.input');
        let result = document.querySelector('#result');
        input.addEventListener('change', function () {
            result.textContent = this.value;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

この例では、<input> 要素にテキストを入力してフォーカスをボタンに移動すると、change イベントが発生し、入力されたテキストが表示されます。

値のすべての変更を処理する場合は、代わりにinput イベントを使用してください。

ラジオボタンに対するJavaScript changeイベントの使用

ラジオボタンは、選択後、change イベントを発生させます。

次の例は、ラジオボタンのchange イベントの処理方法を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Radio Buttons</title>
</head>
<body>
    <span>Status:</span>
    <input type="radio" id="pending" name="status"> 
    <label for="pending">Pending</label>
    <input type="radio" id="resolved" name="status"> 
    <label for="resolved">Resolved</label>
    <input type="radio" id="rejected" name="status">
    <label for="rejected">Rejected</label> 
    <p id="result"></p>

    <script>
        let result = document.querySelector('#result');
        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let message;
            switch (target.id) {
                case 'pending':
                    message = 'The Pending radio button changed';
                    break;
                case 'resolved':
                    message = 'The Resolved radio button changed';
                    break;
                case 'rejected':
                    message = 'The Rejected radio button changed';
                    break;
            }
            result.textContent = message;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

仕組み

まず、body のchange イベントにイベントハンドラを登録します。ラジオボタンをクリックすると、そのchange イベントはbodyにバブリングされます。このテクニックはイベントデリゲーションと呼ばれます。
次に、どのラジオボタンが選択されているかに基づいて、対応するメッセージを表示します。

チェックボックスに対するJavaScript changeイベントの使用

ラジオボタンと同様に、チェックボックスは、チェック済みか未チェックかにかかわらず、選択後にchange イベントを発生させます。例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Checkboxes</title>
</head>
<body>
    <label for="status">Web Technology:</label>
    <input type="checkbox" id="html"> HTML
    <input type="checkbox" id="css"> CSS
    <input type="checkbox" id="js"> JavaScript
    <p id="result"></p>

    <script>
        let result = document.querySelector('#result');
        
        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let message;

            switch (target.id) {
                case 'html':
                    message = 'The HTML checkbox changed';
                    break;
                case 'css':
                    message = 'The CSS checkbox changed';
                    break;
                case 'js':
                    message = 'The JavaScript checkbox changed';
                    break;
            }
            result.textContent = message;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

select要素に対するJavaScript changeイベントの使用

<select> 要素は、選択が完了するとchange イベントを発生させます。

次の例は、<select> 要素のchange イベントの処理方法を示しています。idがresult の<p> 要素には、選択されたアイテムが表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Select element</title>
</head>
<body>
    <select id="lang">
        <option value="">Select a language</option>
        <option value="JavaScript">JavaScript</option>
        <option value="TypeScript">TypeScript</option>
        <option value="PHP">PHP</option>
        <option value="Python">Python</option>
        <option value="Java">Java</option>
    </select>
    <p id="result"></p>
    <script>
        let select = document.querySelector('#lang');
        let result = document.querySelector('#result');
        select.addEventListener('change', function () {
            result.textContent = this.value;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

仕組み

まず、id（lang）で<select> 要素を選択します。
次に、<p> 要素に選択された値を表示します。

まとめ

<input> 要素は、フォーカスを失うとchange イベントを発生させます。
ラジオボタン、チェックボックス、セレクト要素は、選択後、change イベントを発生させます。

このチュートリアルは役に立ちましたか？