이벤트 중복호출 아무리해도 해결안될때

모달안에 탭을 클릭할경우 이벤트를 호출하는 코드를 작성하였다.

하나의 모달div에 여러기능을 넣다보니 문제가 발생하였다.

이벤트가 쌓이는 문제가발생하였다. 이런경우 만약 클릭이벤트리스터인경우 두번 세번 네번.. 점점 호출양이 쌓이게된다.

쌓이는건 좋은데 이벤트가 누적되어 여러번 호출되었다.

클릭이벤트리스너만 4개가 쌓여서 4번호출됨!

시행착오

1. 혹시 부모요소로 감싸서 이벤트리스너를 하여서 그런가싶어서 개별 이벤트리스너로 변경해보았으나 소용이 없었다.

2. 이벤트 전파 방지인 e.propagation()를 넣어도 소용이없었다.

혹시나 싶어 태그 동작 중단인 e.proventDefault()도 넣었으나 역시나 소용이 없었다. 

3. 이벤트리스너 옵션값 false추가 -> 말도 안들음

4. removeEventListener추가 -> 말도 안들음 아마 모달이 닫힐때 사용해야하나..?

5. html내부에있던 탭을 모달을 띄울때마다 탭을 그리는 것 => 처음에 해결된줄알았는데 실패

 

원인

함수를 호출할때마다 이벤트리스너를 발생시키기때문에 쌓이는 구조

 

해결

1. 모달을 여러개로 분리하기? => 코드양이 많아지고 유지보수의 어려움

2. 돔지우고 다시그리기? => 모달그릴때마다 돔을 새로그려야해서 비효율적

3. 함수 밖으로 클릭이벤트를 빼내면 자바스크립트가 최초 로드될때 클릭이벤트는 딱 1번만 생성된다.