4.3.1 이벤트 리스너 추가하기

이벤트 리스너를 추가할 때는 addEventListener()라는 메서드를 사용합니다. addEventListener()는 태그에 이벤트 리스너를 다는 메서드로, 다음과 같습니다.

태그.addEventListener('<이벤트 이름>', <이벤트 리스트>)

앞에서 배운 document.querySelector() 메서드를 사용해 HTML 태그들에 이벤트 리스너를 달아 보겠습니다.

앞 절에서 사용한 word-relay.html 파일의 script 태그 내부에 이벤트가 발생하면 이를 감지할 onClickButton() 함수를 만들고 이 함수를 버튼 태그의 클릭 이벤트에 연결합니다. 태그는 document.querySelector('button')으로 선택합니다. 선택한 태그에 addEventListener() 메서드를 사용해 이벤트 리스너를 답니다. 이벤트 이름은 click이고, 버튼을 클릭하면 onClickButton() 함수가 실행됩니다. 이때 onClickButton()을 넣으면 안 됩니다. 함수명에 소괄호(())를 붙이면 클릭과 상관없이 함수가 실행됩니다. 이벤트를 연결할 때는 함수명만 넣어야 하고, 소괄호까지 붙이면 함수 자체가 실행된다는 점에 주의하세요.