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

JavaScriptのchange（ブラウザイベント）を解説します。

change

changeは値の変更が確定したときのイベントです。
input要素やtext要素で値を入力し、エンターキー入力やフォーカスを外すと値が確定します。

サンプル

HTML属性

onchange属性を設定します。

Sample

<input id="input" onchange="valueRender(event);">
<p id="message"></p>

<script type="text/javascript">
    
    function valueRender(event) {
        let message = document.getElementById('message');
        message.textContent = event.target.value;
    }
    
</script>

プレビュー

DOMメソッド

イベント種別にchangeを設定します。

Sample

<input id="input">
<p id="message"></p>

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

プレビュー