<문제>
렌더 함수에 addEventListenr를 넣으면, 렌더가 실행될 때마다 리스너가 중복으로 추가된다.
즉, 이벤트를 한번 실행해도 같은 리스너가 여러개 등록되어 있어서, 리스너가 2번 이상 호출된다.
<시도>
onclick은 이벤트가 덮어씌워지므로, 이걸 사용할 수 있겠지만, 웬만하면 eventLinstener를 사용하는 것이 좋다.
추가로, 이벤트 위임으로 하위 요소의 이벤트를 등록하는 것보다,
forEach로 각각을 정해주는 것이 유지보수 하기에 좋다.
<해결방법>
⇒ 첫번째 방법에서 콜백에 e를 명시 안하고 함수 이름만 적어도 알아서 넘겨짐
⇒ 두번째 방법에서 arguments.callee는 deprecated되므로 xx
따라서 forEach로 요소마다,
눌렀을 때 실행되길 원하는 로직과 함께 removeEventListener를 담은 함수를 만든다. removeEventListener의 이벤트 대상은 해당 함수이다.
마지막으로 이 함수를 addEventListener해주면 된다.
ex)
$cart.querySelectorAll('.remove').forEach(($button,idx) => { const onClick = () => { $button.removeEventListener('click',onClick) onRemove(idx); } $button.addEventListener('click',onClick)
- 참고
- eventListener에서 외부 변수를 참조한다면, 해당 변수는 호출한 그 당시의 변수 값을 가져오므로 걱정 ㄴㄴ