목록이벤트위임 (2)
코딩쌀롱
✱문제1. 체크박스 체크되는 영역 문제 : chakra UI의 Checkbox를 사용해서 선택하는 모달창을 만들었는데, Checkbox만 클릭해야 체크되고 그 외의 MenuItem 요소부분을 클릭하면 모달창이 닫히거나 체크되지 않는 문제 생각 : ui 라이브러리를 사용하지 않고, 직접 짰다면 label을 이용해서 쉽게 해결할 수 있는 문제인데.. 만들어진 걸 가져다 쓰려니까 내가 주는 className이나 data-id값이 어디에 저장되는지 알 수가 없어 많이 헤맸다. 해결 : MenuItem > ItemWrap, Checkbox 구조에서 MenuItem > Checkbox > ItemWrap 구조로 변경 체크박스 자식인 ItemWrap을 클릭해도 체크가 된다. 하지만 라벨 width === 아이템랩 w..
📌 bind() 문제 발생 let view = new View(); view.addButton.addEventListener("click", view.addList); 클래스의 view.addList 함수 본체에 this는 view 객체를 가리키는데, addEventListener에서 this는 이벤트 target이 되는 element 객체를 가리킨다. 이런 차이로 정상적으로 동작하지 않는 문제가 발생했다. 해결 방법 let view = new View(); view.addButton.addEventListener("click", view.addList.bind(view)); bind()메서드로 this가 가리키는 객체를 직접 지정해줘서 해결했다. 📌 Event Delegation 문제 발생 // cla..