【JavaScript】change（ブラウザイベント） - 値の変更が確定した時のイベント

JavaScriptのchange（ブラウザイベント）について解説します。

検証環境

JavaScript -

macOS

14.1

change

changeは“値の変更が確定した時を表すイベント”です。

input要素を値を入力し、Enterキーで確定した時などが該当します。

HTML属性

HTML属性でチェンジイベントを登録するにはonchange属性を使用します。

基本構文

<タグ名 onchange="処理">

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

___ih_hl_start
<input id="target" type="text" onchange="process(event);">
___ih_hl_end

<pre id="log"></pre>

<script type="text/javascript">

    function process( event ) {
        let log = document.getElementById('log');
        log.textContent = event.target.value;
    }

</script>

プレビュー

８行目のonchange="process(event);"がHTML属性を利用したチェンジイベントの登録です。

入力ボックスに値を入力し、Enterキーで確定すると、process関数を呼び出します。

実際にプレビューで動作を確認することが可能です。

※ 日本語入力の場合、『変換確定』のEnterキーの後に再度Enterキーを入力することで値が確定されます。

DOMメソッド

DOMのaddEventListenerメソッドでチェンジイベントを登録するにはイベント種別にchangeを与えます。

基本構文

要素オブジェクト.addEventListener('change', 処理);

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<input id="target" type="text">

<pre id="log"></pre>

<script type="text/javascript">
    
    let target = document.getElementById('target');
    
    ___ih_hl_start
    target.addEventListener('change', function( event ) {
        let log = document.getElementById('log');
        log.textContent = event.target.value;
    });
    ___ih_hl_end
    
</script>

プレビュー

１６〜１９行目がaddEventListenerメソッドを利用したチェンジイベントの登録です。

プレビューの入力ボックスにフォーカスを当てると、値が表示され、その内容からイベントハンドラーを実行したことが確認できます。