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

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

検証環境

JavaScript -

macOS

14.1

input

inputは“値を変更した時を表すイベント”です。

input要素に値を入力した時などが該当します。

HTML属性

HTML属性でインプットイベントを登録するにはoninput属性を使用します。

基本構文

<タグ名 oninput="処理">

サンプル

sample.js

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

___ih_hl_start
<input id="target" type="text" oninput="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>

プレビュー

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

入力ボックスに値を入力すると、process関数を呼び出します。

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

DOMメソッド

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

基本構文

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

サンプル

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('input', function() {
        let log = document.getElementById('log');
        log.textContent = event.target.value;
    });
    ___ih_hl_end
    
</script>

プレビュー

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

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