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);

引数を渡したい場合は、無名関数（またはアロー関数）でラップします。

input1.addEventListener('change', (e) => { updateValue(e, 'abc'); }); function updateValue(e, str) { log1.innerHTML = e.target.value + ' ' + str; }

もしイベントオブジェクトが不要なら、

input1.addEventListener('change', () => { updateValue('abc'); }); function updateValue(str) { log1.innerHTML = str; }