이번에는 input 태그에 글자를 입력하면 input 이벤트가 발생하게 해 보겠습니다. 버튼과 비슷하게 input 태그를 선택한 후 input 이벤트 리스너를 연결합니다. 이벤트 리스너인 onInput() 함수에는 조금 독특한 점이 있습니다. 함수의 매개변수로 event가 존재한다는 점입니다. 이벤트 리스너에는 매개변수를 통해 addEventListener()가 제공하는 이벤트에 관한 정보가 전달됩니다(https://developer.mozilla.org/ko/docs/Web/API/Event). 여기서는 event.target.value로 input 태그에 입력한 값을 알아낼 수 있습니다.

const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton);

const onInput = (event) => {
  console.log('글자 입력', event.target.value);
};
const $input = document.querySelector('input');
$input.addEventListener('input', onInput);

참고로 event는 매개변수이므로 다른 이름으로 지어도 됩니다. 다음처럼 e로 해도 되고 전혀 관련 없는 hello로 지어도 됩니다. 다만, hello로 지으면 코드를 보는 사람들이 헷갈릴 수 있습니다. 그래서 필자는 보통 event라고 이름을 짓습니다.