JavaScript에서 요소에 이벤트 핸들러 바인딩하기

이제 우리의 DOM 요소가 웹사이트 사용자의 동작에 반응하도록 만들어 보겠습니다. 예를 들어, 사용자가 마우스로 어딘가를 클릭하면 우리의 코드는 그 클릭에 대한 응답으로 이를 처리하고 화면에 어떤 정보를 출력해야 합니다.

JavaScript를 통해 추적할 수 있는 사용자의 동작을 이벤트라고 합니다. 이벤트는 다음과 같은 종류가 있을 수 있습니다: 페이지 요소에 대한 마우스 클릭, 페이지 요소에 마우스를 가져가는 것 또는 반대로 요소에서 마우스 커서가 벗어나는 것 등입니다. 또한, 사용자의 동작에 의존하지 않는 이벤트도 있습니다. 예를 들어, 브라우저에 HTML 페이지가 로드될 때 발생하는 이벤트가 있습니다.

예를 들어, 클릭했을 때 화면에 어떤 텍스트가 출력되는 버튼을 만들어 보겠습니다. 먼저 버튼의 HTML 코드를 만들겠습니다:

<input id="button" type="submit">

이제 버튼에 대한 참조를 변수에 저장하겠습니다:

let button = document.querySelector('#button');

이제 버튼을 클릭했을 때의 반응을 설정해야 합니다. 이를 위해 JavaScript에는 특별한 메서드 addEventListener가 있습니다. 첫 번째 매개변수로 이벤트 이름(버튼 클릭은 'click'라는 이름을 가짐)을 받고, 두 번째 매개변수로는 해당 이벤트가 발생했을 때 실행되는 콜백 함수를 받습니다.

예를 들어, 버튼을 클릭했을 때 어떤 텍스트를 출력해 보겠습니다:

button.addEventListener('click', function() {
	console.log('!!!');
});

다음과 같이 3개의 버튼이 주어져 있습니다:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

첫 번째 버튼을 클릭하면 숫자 1이 화면에 출력되고, 두 번째 버튼을 클릭하면 숫자 2, 세 번째 버튼을 클릭하면 숫자 3이 출력되도록 만드세요.