2021.6.21(mon)_event delegation, bubbling

✱문제1. 체크박스 체크되는 영역

문제 : chakra UI의 Checkbox를 사용해서 선택하는 모달창을 만들었는데, Checkbox만 클릭해야 체크되고 그 외의 MenuItem 요소부분을 클릭하면 모달창이 닫히거나 체크되지 않는 문제

생각 : ui 라이브러리를 사용하지 않고, 직접 짰다면 label을 이용해서 쉽게 해결할 수 있는 문제인데.. 만들어진 걸 가져다 쓰려니까 내가 주는 className이나 data-id값이 어디에 저장되는지 알 수가 없어 많이 헤맸다. 

해결 : 

MenuItem > ItemWrap, Checkbox 구조에서

MenuItem > Checkbox > ItemWrap 구조로 변경

체크박스 자식인 ItemWrap을 클릭해도 체크가 된다.

 

하지만 라벨 width === 아이템랩 width === 체크박스 width 라서 남는 여백을 클릭하면 체크가 안 된다.

그래서 체크박스 width를 100%로 해서 MenuItem의 남은 여백을 클릭해도 체크되도록 함.

 

추가로, MenuItem에 padding때문에 조금의 패딩 여백을 클릭하면 체크가 되지 않아 패딩을 없앴고, ItemWrap에 padding을 줘 간격을 유지하되 클릭이벤트가 여백없이 발생하도록 수정했다.

 

 

✱문제2. 이벤트 핸들러가 2번 호출되는 문제

문제: 이벤트 위임을 사용해서 MenuList에 클릭이벤트 핸들러 연결, Checkbox를 클릭했을 때 호출되도록 하려고 했다. 그런데 콘솔에 클릭된 target을 찍어보니 계속 두 번씩 호출됐다.

해결: 이벤트 위임을 할 때 클릭된 요소가 내가 원하는 요소가 아닐 때는 조건문으로 early return을 제대로 해줘야 한다!! 그렇지 않으면 내가 클릭한 요소 target부터 핸들러를 연결한 요소까지 버블링 주루룩 → 핸들러 주루룩 호출! 따라서 내가 원하는 요소가 아니라면 early return 해줘야함.

 

이벤트 위임을 지금까지 써왔었는데..이렇게 기본적인 버블링조차 제대로 알지 못하고 있었다는 것에 매우 충격받았다..🤯

진짜 기본이 충실해야함을 다시 깨달았고, 버블링, 캡쳐링, 이벤트 위임 제대로 공부해야겠다..