● 이벤트 등록 메서드로 이벤트 등록하기
DOM에서 제공하는 addEventListener() 메서드를 사용해 이벤트를 등록할 수도 있습니다. 3가지 방법 중 가장 권장하는 방식입니다.
형식
<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);
addEventListener() 메서드의 매개변수에 이벤트 타입과 이벤트 함수를 전달하면 되는데, 이벤트 타입은 표 12-9에 나온 이벤트 종류에서 on만 빼면 됩니다.
12/06/addEventListener.html
<button>클릭</button>
<script>
const btnEl = document.querySelector("button");
btnEl.addEventListener("click", function(){
alert("button Click");
});
</script>
ES6 개발 환경이라면 이벤트 함수에 화살표 함수도 사용할 수 있습니다. 또는 함수 선언문이나 함수 표현식으로 정의한 함수명으로 연결해도 됩니다.
12/06/addEventListenerArrow.html
<button>클릭</button>
<script>
const btnEl = document.querySelector("button");
const clickEvent = () => {
alert("button Click");
}
btnEl.addEventListener("click", clickEvent);
</script>
단, 함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로 참조하려는 함수가 addEventListener() 메서드보다 반드시 위에 작성되어야 합니다.