HTML

<input id="evt" placeholder="Enter some text" name="name"/> <p id="values"></p>

input イベントは、値が変更されたときに発生します。

const input1 = document.querySelector('#evt'); const log1 = document.getElementById('values'); input1.addEventListener('input', updateValue, false); function updateValue(e) { log1.innerHTML = e.target.value; }

change イベントは、値の変更が確定したときに発生します。

const input1 = document.querySelector('#evt'); const log1 = document.getElementById('values'); input1.addEventListener('change', updateValue, false); function updateValue(e) { log1.innerHTML = e.target.value; }

無名関数を使った書き方。

const input1 = document.querySelector('#evt'); const log1 = document.getElementById('values'); input1.addEventListener('change', function() { log1.innerHTML = input1.value; }, false);