[ISSUES] 이벤트 중첩 발생현상

## 현상

vue의 tabulator라는 라이브러리를 통해 table을 형성하고,

table 내부 셀에 대해서 이벤트를 걸어주는 코드를 작성하면서 이벤트가 계속해서 누적되어 발생하는 현상을 발견했다.

...?

cellClick: (cell) => {
          const targetClass = cell.target.className;
          const targetIndex = targetClass.split('-')[1];
          document
            .querySelector(`.${cell.target.className}`)
            .addEventListener('change', (event) => {
              const cellData = event.target.value;
              // this.setTableData(targetIndex, cellData, '최대 점수');
              console.log(cellData);
            });
        },

 

## 고민

처음에는 이벤트 버블링(Event  Bubbling) 현상으로 인해서 상위 컴포넌트에 이벤트가 계속 쌓인다고 생각해서

event.stopPropagation() 코드라인을 추가해주었지만 결과에는 영향을 주지 못했다.

 

다음으로는 기존에 select 박스가  default event를 가지고 있었나...? 해서

event.preventDefalut() 코드라인도 추가해보았지만 변화는 없었다.

 

 

## 해결

생각보다 단순하게 문제가 해결되었다.

코드라인에서 querySelector에 이벤트를 추가하는 과정에서, 사용된 이벤트를 제대로 제거해주지 않아 발생하는 현상이었다.

. addEventListener()가 계속해서 querySelector에 쌓이니 저렇게 호출될 수밖에...

 

해결한 코드는 다음과 같다.

cellClick: (cell) => {
          const targetClass = cell.target.className;
          const targetIndex = targetClass.split('-')[1];
          document
            .querySelector(`.${cell.target.className}`)
            .addEventListener('change', (event) => {
              const cellData = event.target.value;
              // this.setTableData(targetIndex, cellData, '최대 점수');
              console.log(cellData);
            });
           
          document.removeEventListener(`.${cell.target.className}`);
        },

cell을 클릭하는 이벤트의 마지막에. removeEventLisner를 통해 이벤트를 없애줌으로써

다음에 다시 클릭했을 때 새롭게 이벤트가 적용되도록 해주었다.