JavaScript에서 이벤트 핸들러 제거하기

이번 강의에서는 우리가 이전에 요소에 연결했던 이벤트 핸들러를 제거하는 방법을 배우겠습니다. 예를 들어 다음과 같은 버튼이 주어졌다고 가정해 봅시다:

<input id="button" type="submit">

이 버튼에 func 함수를 연결해 보겠습니다:

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
}

이제 이벤트 핸들러가 첫 번째 클릭에서만 동작하고, 그 후에는 버튼에서 제거되도록 만들어 봅시다. 이를 위해 특별한 메서드인 removeEventListener가 존재합니다. 이 메서드는 첫 번째 매개변수로 이벤트 타입을, 두 번째 매개변수로 제거해야 할 함수의 참조를 받습니다.

일반적으로, 이는 이벤트 핸들러가 연결된 방식과 동일한 방식으로 제거됨을 의미합니다. 즉, 만약 우리가 addEventListener('click', func)와 같이 연결했다면, 동일한 매개변수로 제거해야 합니다, 즉 removeEventListener('click', func)와 같이 말이죠.

자, 이제 우리가 제시한 문제를 해결해 봅시다:

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
	this.removeEventListener('click', func);
}

링크와 버튼이 주어져 있습니다. 버튼을 클릭하면 링크 텍스트의 끝에, 해당 링크의 href 속성값을 괄호 안에 추가하세요. 이 추가 작업이 오직 첫 번째 클릭에서만 일어나도록 만드세요.

값이 1인 버튼이 주어져 있습니다. 이 버튼을 클릭할 때마다 그 값이 1씩 증가하도록 만드세요. 버튼의 값이 10에 도달한 후에는, 버튼이 더 이상 클릭에 반응하지 않도록 이벤트 핸들러를 제거하세요.