[JavaScript] 이벤트리스너 제거 시, 유의사항

HYl·2022년 3월 13일

const testFunc = (value) => () => {
	console.log('고차 함수', value);
}

test.addEventListener('click', testFunc(1));

위의 이벤트 리스너를 removeEventListener 메서드로 제거해보자.

test.removeEventListener('click', testFunc(1));

일반적으로는, 위의 코드 방식대로 이벤트 리스너를 제거 할 것이다.
그러나. 위의 방법으로 했을 때, 정상적으로 이벤트가 제거되지 않는다.
why ? click 했을 때, addEventListener의 testFunc(1)와 removeEventListener의 testFunc(1)이 서로 일치해야 정상적으로 이벤트가 제거가 되는데

testFunc(1) === testFunc(1) // false

객체와 객체를 비교하였을 때, false가 나온다.
함수도 객체이기 때문이다.

객체와 객체를 비교할 때, true가 되게 하는 방법은 변수를 사용하는 것이다.

const testFunc1 = {};
const testFunc2 = testFunc1;
testFunc1 === testFunc2; // true

위와 같이, 객체는 변수에 넣어서 변수끼리 참조해줘야 서로 같다고 나온다.

해결 방법은 ?

함수를 변수 안에 넣은 다음, 지정한 변수를 이벤트 리스너에 등록해주면 된다.

const testFunc = (value) => () => {
	console.log('고차 함수', value);
}

const Func = testFunc(1);

console.log(testFunc(1) === testFunc(1)); // false
console.log(Func === Func); // true

test.addEventListener('click', Func);
test.removeEventListener('click', Func);