저번 요소를 호출하는 법에 이어 이번에도 실무에서 많이 사용하는 이벤트 핸들러를 같이 다루려 한다. 우선 addEventListener를 다루기 전에 이벤트 핸들러에 대해 알아보자.
브라우저는 처리할 특정 사건이 발생시 이를 감지해서 이벤트를 발생시킨다.
크게 예를 들면 클릭, 키보드입력, 마우스 이동 이러한 것들이다.
이러한 것들이 브라우저가 감지하여, 특정타입의 이벤트를 불러온다.
이때 이벤트가 발생 하면서 호출 될 함수를 이벤트 핸들러라고 한다.
이러한 이벤트 핸들러를 활용할 수 있는 대표적인 메서드 방식이 addEventListener다.
addEventListener 메서드의 첫 번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 이벤트 타입을 전달한다. 기본적으로 사용법은 다음과 같다.
const $button = document.querySelector('button');
// 기존 이벤트 핸들러 프로퍼티 방식
// $button.onClick = function() {
// console.log('button click')
// };
$button.addEventListener('cilck', function() {
console.log('button click');
})기존 프로퍼티 방식인 on접두사를 사용하지 않는 방식으로
이벤트 타겟.addEventListener('이벤트 타입',이벤트 핸들러[, capture]);
이러한 구조를 가지고 있다.
이외에도 다음과 같은 특징을 가지는데,
// 참조가 동일한 이벤트 핸들러를 중복으로 올리면 하나의 핸들러만 등록된다.
$button.addEventListener("cilck", handleClick);
$button.addEventListener("cilck", handleClick);
// 동일한 이벤트를 하나 이상의 핸들러로 등록 할 수도 있다.
$button.addEventListener("click", function () {
console.log("[1]button click");
});
$button.addEventListener("click", function () {
console.log("[2]button click");
});동일한 HTML 요소에서 발생한 동일한 이벤트 핸들러 프로퍼티 방식을 사용하면 하나 이상의 이벤트 핸들러를 등록할 수 없지만 addEventListener 메서드를 사용한다면, 하나 이상의 이벤트 핸들러를 등록할 수 있다. 등록된 순서 대로 호출이 된다.
다만 참조가 동일한 곳에서 불러오는 이벤트 핸들러를 중복 등록하게되면, 하나의 핸들러만 등록해 동작한다.
이외에도 핸들러를 제거하고 싶을때, 전달할 인수와 일치시켜 removeEventListener를 사용한다.
