JavaScript에서 반복문 내 이벤트 핸들러 제거하기

이제 요소가 하나가 아니라 여러 개인 경우를 살펴보겠습니다. 예를 들어, 여러 개의 단락이 있습니다:

<p>text1</p>
<p>text2</p>
<p>text3</p>

이 각 단락에 클릭 이벤트 핸들러로 함수 func를 연결해 보겠습니다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

이제 각 단락이 오직 첫 번째 클릭에만 반응하도록 코드를 수정해 보겠습니다. 이를 위해 단락을 클릭하면 연결된 핸들러를 해당 단락에서 제거할 것입니다. 이때 제거는 이 특정 단락에만 적용되며, 다른 단락에는 영향을 미치지 않습니다.

이미 알고 있듯이, 이벤트가 발생한 요소는 핸들러 함수 내에서 this를 통해 얻을 수 있습니다. 이는 this에서 핸들러를 제거해야 함을 의미합니다. 다음과 같이 작성합니다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // 핸들러 제거
}

단락들이 주어져 있습니다. 어떤 단락을 클릭하면 그 단락의 끝에 느낌표를 추가하세요. 이 추가 작업이 오직 첫 번째 클릭에서만 발생하도록 만드세요.