addEventListener
HTML 속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 할당 방식엔 근본적인 문제가 있습니다. 하나의 이벤트에 복수의 핸들러를 할당할 수 없다는 문제다.
버튼을 클릭하면 버튼을 강조하면서 메시지를 보여주고 싶다고 해 봅시다.
두 개의 이벤트 핸들러가 필요할 겁니다. 하지만 기존 방법으로는 프로퍼티가 덮어씌워 진다는 문제가 있다.
input.onclick = function() { alert(1); }
// ...
input.onclick = function() { alert(2); } // 이전 핸들러를 덮어씀
웹 표준에 관여하는 개발자들은 오래전부터 이 문제를 인지하고, addEventListener 와 removeEventListener 라는 특별한 메서드를 이용해 핸들러를 관리하자는 대안을 제시했습니다. 핸들러를 여러 개 할당할 수 있도록 말이죠.
문법은 다음과 같습니다.
element.addEventListener(event, handler, [options]);
event
이벤트 이름(예: "click")
handler
핸들러 함수
options
아래 프로퍼티를 갖는 객체
once: true이면 이벤트가 트리거 될 때 리스너가 자동으로 삭제됩니다.
capture: 어느 단계에서 이벤트를 다뤄야 하는지를 알려주는 프로퍼티로, 관련 내용은 버블링과 캡처링 챕터에서 자세히 다룰 예정입니다. 호환성 유지를 위해 options를 객체가 아닌 false/true로 할당하는 것도 가능한데, 이는 {capture: false/true}는 와 동일합니다.
passive: true이면 리스너에서 지정한 함수가 preventDefault()를 호출하지 않습니다. 자세한 내용은 브라우저 기본 동작에서 다루겠습니다.
핸들러 삭제는 removeEventListener로 합니다.
element.removeEventListener(event, handler, [options]);
삭제는 동일한 함수만 할 수 있습니다.
핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해주어야 합니다.
아래와 같이 이벤트를 할당하고 삭제하면 원하는 대로 동작하지 않습니다.
elem.addEventListener( "click" , () => alert('감사합니다!'));
// ....
elem.removeEventListener( "click", () => alert('감사합니다!'));
removeEventListener를 썼지만, 핸들러는 지워지지 않습니다. removeEventListener가 addEventListener를 사용해 할당한 함수와 다른 함수를 받고 있기 때문입니다. 함수는 똑같게 생겼지만 그럼에도 불구하고 다른 함수이기 때문에 이런 문제가 발생합니다.
위 예시를 제대로 고치면 다음과 같습니다.
function handler() {
alert( '감사합니다!' );
}
input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);
변수에 핸들러 함수를 저장해 놓지 않으면 핸들러를 지울 수 없다는 것을 항상 기억해 놓으셔야 합니다. 이렇게 하지 않으면 addEventListener로 할당한 핸들러를 ‘불러올’ 수 없습니다.
addEventListener를 여러 번 호출하면 아래와 같이 핸들러를 여러 개 붙일 수 있습니다.
<input id="elem" type="button" value="클릭해 주세요."/>
<script>
function handler1() {
alert('감사합니다!');
};
function handler2() {
alert('다시 한번 감사합니다!');
}
elem.onclick = () => alert("안녕하세요.");
elem.addEventListener("click", handler1); // 감사합니다!
elem.addEventListener("click", handler2); // 다시 한번 감사합니다!
</script>지금까지 살펴본 바와 같이 핸들러는 DOM 프로퍼티와 addEventListener 를 사용하는 방법 두 가지를 사용해 할당할 수 있습니다. 대개는 두 방법 중 하나만을 사용해 할당합니다.
-