📘 12.1.2 이벤트 리스너 제거하기 - 불필요한 소음을 조용히 정리하기
여러분과 함께 하는 이 시간이 정말 소중해요. 지난 시간에 addEventListener로 웹페이지에 이벤트 듣는 도우미를 추가하는 방법을 배웠죠? 이번에는 그보다 더 세심한 이야기를 나누고 싶어요. 더 이상 필요 없는 이벤트 듣는 도우미를 조용히 정리하는 방법을 배워볼 거예요. 마치 밤이 깊어질 때 하루의 소음들을 하나씩 멈춰가며 고요함을 찾아가는 것처럼요.
🧠 새로운 단어들과 친해지기
이벤트 듣는 도우미를 정리할 때 사용하는 중요한 단어들을 살펴보겠어요.
| 단어 | 쉬운 설명 |
|---|---|
| removeEventListener | 붙여놓은 이벤트 듣는 도우미를 조용히 떼어내는 명령어예요. |
| 메모리 낭비 | 사용하지 않는 것들이 컴퓨터 기억 공간에 계속 남아있는 문제예요. |
| 함수 참조 | 함수를 가리키는 위치나 연결고리를 말해요. |
| 일회성 이벤트 | 한 번만 실행되고 자동으로 사라지는 이벤트예요. |
removeEventListener는 "remove(제거하다) + event(사건) + listener(듣는 사람)"을 합친 말이에요. 말 그대로 "사건을 조용히 듣고 있던 도우미를 정리하는 것"이랍니다.
✨ 이벤트 리스너 제거의 핵심 개념
이벤트 듣는 도우미를 붙이는 것만큼 조용히 정리하는 것도 중요해요. 컴퓨터는 한번 붙인 이벤트 듣는 도우미를 계속 기억하고 있거든요. 만약 더 이상 필요 없는 도우미를 정리하지 않으면 컴퓨터 기억 공간이 점점 쌓여서 웹페이지가 느려질 수 있어요.
removeEventListener를 사용할 때 가장 중요한 점은 붙일 때와 정확히 똑같은 조건으로 사용해야 한다는 거예요. 같은 이벤트 종류("click", "mouseover" 등)와 같은 함수를 사용해야만 제대로 제거가 돼요.
특히 함수를 변수에 저장해놓는 것이 매우 중요해요. 이름 없는 함수로 붙인 이벤트 듣는 도우미는 나중에 제거할 수 없거든요. 마치 이름표가 없는 물건은 나중에 찾기 어려운 것과 같아요.
일상 속 비유: 조용한 정리 시간 이야기
이벤트 리스너 제거를 더 자연스럽게 이해하기 위해 '조용한 정리 시간' 이야기를 들려드릴게요.
여러분이 스마트폰에 여러 개의 알림을 설정했다고 상상해보세요.
- 평일 7시 알림: 학교 가는 시간
- 토요일 9시 알림: 축구 연습 시간
- 일요일 8시 알림: 가족 나들이 시간
하지만 방학이 되면서 학교 가는 알림은 더 이상 필요 없어졌어요. 그래서 평일 7시 알림만 조용히 삭제해요. 다른 알림들은 그대로 두고 말이에요.
이때 중요한 것은 정확히 어떤 알림을 삭제할지 알아야 한다는 거예요. "평일 7시에 울리는 그 알림"이라고 정확히 지목해야 해당 알림만 조용히 삭제할 수 있죠.
removeEventListener도 똑같아요. "버튼의 클릭 이벤트에 연결된 그 함수"라고 정확히 지목해야 해당 이벤트 듣는 도우미만 제거할 수 있어요.
🎯 이벤트 리스너 제거를 배우는 이유
웹페이지를 깔끔하고 빠르게 관리하려면 이벤트 리스너 제거 기능이 꼭 필요해요. 필요 없어진 기능들을 정리해야 웹페이지가 빠르고 안정적으로 작동하거든요.
온라인 게임을 예로 들어볼게요. 1단계 게임을 할 때는 특정 키보드 조작이 필요하지만, 2단계로 넘어가면 완전히 다른 조작 방식을 사용해야 할 수도 있어요. 이때 1단계 조작 이벤트들을 조용히 제거하고 2단계 이벤트들을 새로 붙여야 해요.
온라인 쇼핑몰의 장바구니에서도 마찬가지예요. 사용자가 "구매하기" 버튼을 한 번 누르면 그 상품은 구매된 것이므로, 더 이상 구매 버튼에 반응할 필요가 없어요. 이때 해당 버튼의 이벤트 듣는 도우미를 제거해서 실수로 여러 번 클릭하는 것을 방지할 수 있어요.
한 번만 실행되는 이벤트를 만들 때도 중요해요. 온라인 퀴즈에서 정답을 한 번 맞추면 더 이상 그 문제에 답할 수 없게 해야 하죠. 이때 정답 버튼들의 이벤트 듣는 도우미를 제거해서 중복 입력을 막을 수 있어요.
⚙️ 기본 사용법 배우기
이벤트 리스너 제거의 기본 사용법은 붙일 때와 매우 비슷하지만, 중요한 차이점이 있어요.
// 기본 구조
요소.removeEventListener("어떤일", 함수);올바른 사용 방법:
// 1단계: 함수를 변수에 저장하기
let myClickFunction = function() {
console.log("클릭되었어요!");
};
// 2단계: 이벤트 듣는 도우미 붙이기
let button = document.getElementById("myButton");
button.addEventListener("click", myClickFunction);
// 3단계: 나중에 이벤트 듣는 도우미 떼어내기
button.removeEventListener("click", myClickFunction);잘못된 사용 방법 (제거 불가능):
// 이름 없는 함수로 붙이기 - 나중에 제거할 수 없어요!
button.addEventListener("click", function() {
console.log("클릭되었어요!");
});
// 이렇게 하면 제거되지 않아요
button.removeEventListener("click", function() {
console.log("클릭되었어요!");
});핵심 포인트: 함수를 꼭 변수에 저장해놓고 사용해야 나중에 제거할 수 있어요!
🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 이벤트 리스너 제거가 어떻게 작동하는지 자세히 알아볼게요.
🔹 첫 번째 예시: 한 번만 실행되는 버튼 만들기
첫 번째 예시에서는 클릭하면 한 번만 동작하고 더 이상 반응하지 않는 버튼을 만들어볼게요.
// ID가 "onceButton"인 버튼을 찾아요
let onceButton = document.getElementById("onceButton");
// 한 번만 실행될 함수를 변수에 저장해요
let onceFunction = function() {
console.log("🎉 한 번만 실행되는 기능!");
alert("축하해요! 이 버튼은 이제 더 이상 작동하지 않아요.");
// 버튼 모양도 바꿔서 비활성화된 느낌을 줘요
onceButton.style.backgroundColor = "gray";
onceButton.textContent = "사용 완료";
// 실행 후 즉시 이벤트 듣는 도우미를 제거해요
onceButton.removeEventListener("click", onceFunction);
console.log("이벤트 듣는 도우미가 제거되었어요!");
};
// 이벤트 듣는 도우미를 붙여요
onceButton.addEventListener("click", onceFunction);
console.log("일회용 버튼 이벤트가 준비되었어요!");이 과정을 차근차근 살펴보면, 먼저 함수를 변수에 저장하고, 이벤트를 붙인 다음, 함수가 실행될 때 자기 자신의 이벤트 듣는 도우미를 제거해요. 이렇게 하면 정확히 한 번만 실행되는 버튼을 만들 수 있어요.
🔹 두 번째 예시: 카운터 기능이 있는 버튼
이번에는 3번 클릭하면 자동으로 기능이 정지되는 카운터 버튼을 만들어볼게요.
// 카운터 버튼을 찾아요
let counterButton = document.getElementById("counterButton");
let clickCount = 0; // 클릭 횟수를 세는 변수
// 카운터 함수를 변수에 저장해요
let countFunction = function() {
clickCount++; // 클릭 횟수를 1 증가시켜요
console.log("🔢 클릭 횟수:", clickCount);
counterButton.textContent = "클릭 " + clickCount + "번";
// 3번 클릭하면 이벤트 제거
if (clickCount >= 3) {
alert("3번 클릭 완료! 카운터가 정지돼요.");
counterButton.style.backgroundColor = "red";
counterButton.textContent = "카운터 종료";
// 이벤트 듣는 도우미 제거
counterButton.removeEventListener("click", countFunction);
console.log("카운터 이벤트가 제거되었어요!");
}
};
// 이벤트 듣는 도우미 붙이기
counterButton.addEventListener("click", countFunction);
console.log("3번 클릭 카운터가 시작되었어요!");이 예시에서는 조건부 제거를 보여줘요. 특정 조건(3번 클릭)에 도달하면 이벤트 듣는 도우미를 자동으로 제거하여 더 이상 반응하지 않게 만들어요.
🔹 세 번째 예시: 모드 전환 버튼 만들기
마지막으로 클릭할 때마다 다른 모드로 전환되는 버튼을 만들어볼게요.
// 모드 전환 버튼을 찾아요
let modeButton = document.getElementById("modeButton");
// 빨간 모드 함수
let redModeFunction = function() {
modeButton.style.backgroundColor = "red";
modeButton.textContent = "빨간 모드 ON";
console.log("🔴 빨간 모드로 변경!");
// 빨간 모드 이벤트를 제거하고 파란 모드 이벤트를 붙여요
modeButton.removeEventListener("click", redModeFunction);
modeButton.addEventListener("click", blueModeFunction);
};
// 파란 모드 함수
let blueModeFunction = function() {
modeButton.style.backgroundColor = "blue";
modeButton.textContent = "파란 모드 ON";
console.log("🔵 파란 모드로 변경!");
// 파란 모드 이벤트를 제거하고 다시 빨간 모드 이벤트를 붙여요
modeButton.removeEventListener("click", blueModeFunction);
modeButton.addEventListener("click", redModeFunction);
};
// 처음에는 빨간 모드로 시작
modeButton.addEventListener("click", redModeFunction);
console.log("모드 전환 버튼이 준비되었어요!");이 예시에서는 이벤트 교체를 보여줘요. 하나의 이벤트를 제거하고 즉시 다른 이벤트를 붙여서 버튼의 기능을 동적으로 바꿀 수 있어요.
🔄 이벤트 리스너 제거 과정 정리하기
지금까지 배운 이벤트 리스너 제거 과정을 자연스럽게 정리해볼게요.
첫 번째 단계는 함수 준비예요. 나중에 제거할 수 있도록 함수를 반드시 변수에 저장해서 준비하는 거죠. 두 번째는 이벤트 붙이기예요. addEventListener를 사용해서 저장된 함수로 이벤트 듣는 도우미를 붙이는 단계예요.
세 번째는 제거 조건 확인이에요. 언제 이벤트 듣는 도우미를 제거할지 조건을 확인하는 과정이에요. (클릭 횟수, 시간, 특정 상황 등) 네 번째는 리스너 제거예요. removeEventListener를 사용해서 붙일 때와 똑같은 조건으로 이벤트 듣는 도우미를 제거하는 단계예요.
마지막으로는 정리 완료 단계예요. 이벤트 듣는 도우미가 제거되어 컴퓨터 기억 공간이 정리되고 웹페이지 성능이 좋아지는 과정이에요.
🧚♀️ 이야기로 다시 배우기: 조용한 도서관의 소음 관리 이야기
지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?
어느 조용한 오후, 우리 동네 도서관에 소음 관리 사서 RemoveListener가 있었어요. 이 사서는 도서관에서 불필요한 소음들을 조용히 정리해주는 일을 하셨답니다.
도서관 이용자가 사서님을 찾아왔어요. "사서님, 책을 빌릴 때마다 울리는 알림음을 설정했는데, 한 번 빌리면 더 이상 그 알림음이 울리지 않게 하고 싶어요."
소음 관리 사서님이 조용히 고개를 끄덕이며 말했어요. "removeEventListener 방법을 사용하면 됩니다"
"하지만 주의할 점이 있어요," 사서님이 부드럽게 설명했어요. "먼저 알림음에 이름표를 붙여놔야 나중에 찾을 수 있어요. 이름 없는 알림음은 제거할 수 없거든요."
사서님은 차분히 방법을 가르쳐주었어요:
// 1단계: 함수에 이름표 붙이기
let borrowFunction = function() { ... };
// 2단계: 알림 설정하기
button.addEventListener("click", borrowFunction);
// 3단계: 필요할 때 알림 조용히 끄기
button.removeEventListener("click", borrowFunction);이용자는 감탄했어요. "정말 신기해요! 이제 같은 책을 실수로 여러 번 빌리는 일이 없겠네요!"
소음 관리 사서님의 도움으로 동네 도서관은 효율적이고 조용한 공간을 갖추게 되었답니다. 필요 없는 소음들은 제거하고, 새로운 알림들은 추가하면서 항상 최고의 상태를 유지할 수 있게 되었어요.
🧠 자주 하는 실수와 주의할 점
이벤트 리스너를 제거할 때 실수하기 쉬운 부분들을 미리 알아두면 더 안전하게 코딩할 수 있어요.
❌ 실수 1: 이름 없는 함수로 붙인 이벤트를 제거하려고 하기
// 잘못된 방법 - 제거할 수 없어요
element.addEventListener("click", function() {
console.log("클릭됨");
});
// 이렇게 해도 제거되지 않아요
element.removeEventListener("click", function() {
console.log("클릭됨");
}); // 작동하지 않아요!
// 올바른 방법 - 함수를 변수에 저장
let clickHandler = function() {
console.log("클릭됨");
};
element.addEventListener("click", clickHandler);
element.removeEventListener("click", clickHandler); // 제대로 제거돼요!이런 실수가 생기는 이유는 매번 새로운 함수가 만들어지기 때문이에요. 겉보기에는 같아 보이지만, 컴퓨터 입장에서는 완전히 다른 함수로 생각해요.
❌ 실수 2: 이벤트 종류를 다르게 쓰기
// 잘못된 방법 - 대소문자가 달라요
element.addEventListener("click", myFunction);
element.removeEventListener("Click", myFunction); // 제거 안돼요!
// 올바른 방법 - 정확히 같게 쓰기
element.addEventListener("click", myFunction);
element.removeEventListener("click", myFunction); // 제대로 제거돼요!자바스크립트는 대소문자를 구분하므로 "click"과 "Click"을 다른 것으로 생각해요. 붙일 때와 제거할 때 철자를 정확히 같게 써야 해요.
❌ 실수 3: 없는 리스너를 제거하려고 하기
// 문제가 될 수 있는 경우
element.removeEventListener("click", neverRegisteredFunction);
// 에러는 나지 않지만 아무 일도 일어나지 않아요
// 좋은 습관 - 확인하고 제거하기
if (myFunction) {
element.removeEventListener("click", myFunction);
console.log("이벤트 듣는 도우미가 제거되었어요!");
} else {
console.log("제거할 도우미가 없어요.");
}붙이지 않은 이벤트 듣는 도우미를 제거하려고 해도 에러는 발생하지 않지만 아무 일도 일어나지 않아요. 확인하는 습관을 기르면 더 안전해요.
✏️ 연습문제로 개념 다지기
이제 배운 내용을 잘 이해했는지 확인해보는 시간이에요. 여러분의 마음속에 이런 생각이 조용히 스며들기를 바라요. 이벤트 리스너를 제거하는 일은 단순한 정리가 아니라, 웹페이지가 더 깔끔하고 효율적으로 작동하도록 돕는 따뜻한 배려라는 것을요. 마치 하루가 끝나갈 때 책상을 정리하며 내일을 위한 공간을 만들어주는 마음처럼요.
Ex1) 한 번만 클릭되는 "조용한 인사" 버튼을 만들어보자
// 조용한 인사 버튼을 찾아서 변수에 저장해요
let surpriseButton = document.getElementById("surpriseButton");
// 한 번만 실행될 조용한 인사 함수를 만들어요
let surpriseFunction = function() {
alert("🎊 안녕하세요! 만나서 반가워요.");
console.log("조용한 인사 성공!");
// 버튼을 비활성화 상태로 만들어요
surpriseButton.style.opacity = "0.5";
surpriseButton.textContent = "인사 완료";
// 이벤트 듣는 도우미를 제거해요
surpriseButton.removeEventListener("click", surpriseFunction);
console.log("인사 이벤트가 제거되었어요!");
};
// 조용한 인사 기능을 버튼에 붙여요
surpriseButton.addEventListener("click", surpriseFunction);
console.log("조용한 인사 버튼이 준비되었어요!");이 연습을 통해 일회성 이벤트 만들기와 자동 제거 방법을 익힐 수 있어요.
Ex2) 5번 클릭하면 정지되는 "감사 버튼"을 만들어보자
// 감사 버튼을 찾아서 변수에 저장해요
let clapButton = document.getElementById("clapButton");
let clapCount = 0; // 감사 횟수를 세는 변수
// 감사 함수를 만들어요
let clapFunction = function() {
clapCount++; // 감사 횟수를 1 증가시켜요
console.log("👏 감사합니다 " + clapCount + "번!");
clapButton.textContent = "감사 " + clapCount + "번 👏";
// 5번 감사를 표하면 정지
if (clapCount >= 5) {
alert("🎉 5번 감사 완료! 정말 고마워요!");
clapButton.style.backgroundColor = "gold";
clapButton.textContent = "감사 완료! 🏆";
// 이벤트 듣는 도우미 제거
clapButton.removeEventListener("click", clapFunction);
console.log("감사 이벤트가 제거되었어요!");
}
};
// 감사 기능을 버튼에 붙여요
clapButton.addEventListener("click", clapFunction);
console.log("감사 버튼이 준비되었어요!");이 문제는 조건부 이벤트 제거 방법을 연습하는 데 도움이 돼요.
Ex3) 이벤트를 붙이고 바로 제거하는 테스트 코드를 작성해보자
// 테스트 버튼을 찾아서 변수에 저장해요
let testButton = document.getElementById("testButton");
// 테스트 함수를 만들어요
let testFunction = function() {
console.log("이 메시지는 보이지 않을 거예요!");
};
// 이벤트 붙이기
testButton.addEventListener("click", testFunction);
console.log("✅ 테스트 이벤트가 붙었어요!");
// 바로 제거하기
testButton.removeEventListener("click", testFunction);
console.log("❌ 테스트 이벤트가 제거되었어요!");
console.log("이제 버튼을 클릭해도 아무 일이 일어나지 않을 거예요.");이 연습문제를 통해 이벤트 붙이기와 제거의 전체 과정을 익힐 수 있어요.
📚 11단원 복습문제 - DOM 조작 기억하기
12단원을 배우면서 11단원에서 배운 DOM 조작도 함께 기억해볼까요?
복습문제 1: 이벤트 제거와 DOM 조작을 함께 사용하기
// 11단원에서 배운 DOM 조작과 12단원의 이벤트 제거를 함께 사용해보세요
let addButton = document.getElementById("addButton");
let removeButton = document.getElementById("removeButton");
let container = document.getElementById("container");
// 메시지 추가 함수
let addMessageFunction = function() {
// 11단원에서 배운 createElement로 새 요소 만들기
let newMessage = document.createElement("p");
newMessage.textContent = "새 메시지: " + new Date().toLocaleTimeString();
newMessage.id = "message-" + Date.now(); // 고유한 ID 생성
// 11단원에서 배운 appendChild로 요소 추가하기
container.appendChild(newMessage);
console.log("✅ 새 메시지가 DOM에 추가되었어요!");
// 5개 메시지가 되면 추가 기능 비활성화
if (container.children.length >= 5) {
addButton.removeEventListener("click", addMessageFunction);
addButton.style.opacity = "0.5";
addButton.textContent = "최대 5개까지만";
console.log("메시지 추가 기능이 비활성화되었어요!");
}
};
// 메시지 제거 함수
let removeMessageFunction = function() {
// 11단원에서 배운 DOM 조작으로 마지막 메시지 제거
let lastMessage = container.lastElementChild;
if (lastMessage) {
container.removeChild(lastMessage);
console.log("✅ 마지막 메시지가 제거되었어요!");
// 메시지가 5개 미만이 되면 추가 기능 다시 활성화
if (container.children.length < 5) {
addButton.addEventListener("click", addMessageFunction);
addButton.style.opacity = "1";
addButton.textContent = "메시지 추가";
}
}
};
// 이벤트 등록
addButton.addEventListener("click", addMessageFunction);
removeButton.addEventListener("click", removeMessageFunction);해설: 11단원에서 배운 createElement, appendChild, removeChild 같은 DOM 조작 기능과 12단원의 이벤트 제거를 함께 사용하면 더욱 똑똑한 웹페이지를 만들 수 있어요! 특정 조건에서 이벤트를 자동으로 제거하거나 다시 추가해서 사용자 경험을 향상시킬 수 있답니다.
🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 이벤트 리스너 제거에 대한 이해를 확인해보겠어요.
Q1. 이벤트 리스너를 제거하는 것이 왜 중요한지 초등학생도 이해할 수 있게 설명해보세요.
정답: 이벤트 듣는 도우미를 제거하지 않으면 컴퓨터 기억 공간에 불필요한 것들이 계속 쌓여서 웹페이지가 느려질 수 있기 때문이에요.
해설: 마치 방에 쓰레기를 계속 버리지 않으면 방이 지저분해지고 생활하기 불편해지는 것처럼, 사용하지 않는 이벤트 듣는 도우미들이 컴퓨터 기억 공간에 계속 남아있으면 컴퓨터가 느려져요. 또한 실수로 같은 버튼을 여러 번 클릭하는 것을 막거나, 웹페이지의 기능을 동적으로 바꿀 때도 필요해요.
Q2. 다음 코드에서 잘못된 부분을 찾고 올바르게 수정해보세요.
element.addEventListener("click", function() { alert("안녕"); });
element.removeEventListener("click", function() { alert("안녕"); });정답: 이름 없는 함수로 붙인 이벤트는 제거할 수 없어요.
해설: 겉보기에는 같은 함수처럼 보이지만, 실제로는 두 개의 서로 다른 함수가 만들어졌어요. 제거하려면 함수를 변수에 저장해서 같은 함수 참조를 사용해야 해요.
올바른 코드:
let alertFunction = function() { alert("안녕"); };
element.addEventListener("click", alertFunction);
element.removeEventListener("click", alertFunction);Q3. 일회용 이벤트를 만드는 방법을 설명해보세요.
정답: 이벤트 듣는 도우미 함수 안에서 해당 작업을 실행한 후, 바로 removeEventListener로 자기 자신을 제거하는 방법이에요.
해설: 함수가 실행될 때 마지막에 removeEventListener를 호출해서 자기 자신을 제거하면, 한 번 실행된 후 자동으로 이벤트가 제거되어서 더 이상 반응하지 않게 돼요. 이는 "한 번만 실행해야 하는 버튼"이나 "일회용 기능"을 만들 때 매우 유용해요.
지금까지 이벤트 리스너 제거하기의 모든 비밀을 알아보았어요. 이제 여러분도 웹페이지를 깔끔하고 효율적으로 관리할 수 있는 정리 전문가가 되었답니다!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| removeEventListener의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!
추가 문제 1. 한 번만 실행되는 클릭 이벤트를 만들어보세요.
// 답:
let onceBtn = document.getElementById("onceBtn");
let onceFunction = function() {
alert("한 번만 실행됩니다!");
onceBtn.removeEventListener("click", onceFunction);
console.log("이벤트 리스너 제거 완료");
};
onceBtn.addEventListener("click", onceFunction);추가 문제 2. 3번 클릭하면 이벤트가 제거되는 카운터를 만들어보세요.
// 답:
let countBtn = document.getElementById("countBtn");
let clickCount = 0;
let countFunction = function() {
clickCount++;
console.log("클릭 횟수:", clickCount);
if (clickCount >= 3) {
countBtn.removeEventListener("click", countFunction);
console.log("3번 클릭 완료! 이벤트 제거됨");
}
};
countBtn.addEventListener("click", countFunction);추가 문제 3. 이벤트를 등록하고 바로 제거하는 코드를 작성해보세요.
// 답:
let testBtn = document.getElementById("testBtn");
let testFunction = function() {
console.log("테스트 함수 실행");
};
testBtn.addEventListener("click", testFunction);
console.log("이벤트 등록됨");
testBtn.removeEventListener("click", testFunction);
console.log("이벤트 제거됨");추가 문제 4. removeEventListener가 작동하지 않는 가장 흔한 이유는 무엇인가요?
답: 등록할 때 사용한 함수와 제거할 때 사용한 함수가 다르기 때문입니다. 특히 익명 함수로 등록한 이벤트는 제거할 수 없어요. 함수를 변수에 저장해서 같은 함수 참조를 사용해야 합니다.
추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.
element.addEventListener("click", function() { alert("안녕"); });
element.removeEventListener("click", function() { alert("안녕"); });답: 익명 함수로 등록한 이벤트는 제거할 수 없습니다. 올바른 코드:
let alertFunction = function() { alert("안녕"); };
element.addEventListener("click", alertFunction);
element.removeEventListener("click", alertFunction);🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.
1단계 과정: 함수 준비 → 이벤트 등록 → 클릭 시 함수 실행 → 자동으로 리스너 제거
2단계 과정: 카운터 함수 준비 → 이벤트 등록 → 조건 확인 → 3번 도달시 제거
3단계 과정: 두 함수 준비 → 빨간 모드 등록 → 클릭시 파란 모드로 교체
📂 마무리 정보
오늘 배운 12.1.2 내용이 여러분의 자바스크립트 지식 창고에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'12. 클릭하고 반응하기 (이벤트 처리) > 12.1 이벤트 등록하기' 카테고리의 다른 글
| 12.1.1 addEventListener 사용하기 - 웹페이지의 섬세한 소통법 만들기 (0) | 2025.07.16 |
|---|