어떤 핸들러가 실행될까요
중요도: 5
변수 안에 버튼이 있지만 버튼 처리를 담당하는 핸들러는 없다고 가정해봅시다.
이런 코드가 있는 경우에, 버튼 클릭시 실행되는 핸들러는 무엇일까요? 어떤 얼럿 창이 보일까요?
button.addEventListener("click", () => alert("1"));
button.removeEventListener("click", () => alert("1"));
button.onclick = () => alert(2);정답: 1과 2가 얼럿 창에 표시됩니다.
removeEventListener가 있지만 첫 번째 핸들러는removeEventListener에 의해 지워지지 않았기 때문에 트리거됩니다. 핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를 그대로 전달해주어야 합니다. removeEventListener에 첫 번째 핸들러의 함수와 똑같이 생긴 함수를 전달했지만, 엄연히 다른 함수이기 때문에 removeEventListener를 사용해도 첫 번째 이벤트 핸들러는 지워지지 않습니다.
이미 등록한 핸들러 함수를 삭제하려면 다음과 같이 함수에 대한 참조를 저장해야 합니다.
function handler() {
alert(1);
}
button.addEventListener("click", handler);
button.removeEventListener("click", handler);핸들러 button.onclick은 독립적으로 동작합니다. 따라서 addEventListener와 함께 동작하였습니다.