이벤트 위임에 관한 문제 접근법

Udemy 강의에서 주어진, 이벤트 위임에 관한 문제를 풀고, 그 문제를 복기하는 과정으로 이 글을 쓴다.

ch1

• 기본 뼈대 코드

=> 클릭했을 때, 배경이 'red'로 변하게 하고, 색깔이 있는 블럭 이외에 다른 곳에서는 어떤 이벤트도 발생해서는 안 된다.

• 나의 해결법

• 강사 분의 해결법

=> 강사 분은 classList를 활용해서 특정 경우에 특정 class를 사용하고 사용하지 않는 방식을 사용하신다. 하지만, 한가지 놓치신 부분이 계신데, 블럭 내에 숫자를 클릭시에는 배경이 red로 바뀌지 않는다.
=> 이 부분을 고치기 위해서, 코드를 한 줄 바꿔놨다. 기존의 코드는 comment 처리 해놨다.

---

ch2

• 기본 뼈대 코드

=> [x] 클릭시, 해당 컨텐트 박스가 삭제되도록 만드시오. 단, 다른 곳을 클릭했을 시에는 어떠한 이벤트도 일어나서는 안 됩니다.

• 나의 해결법

• 강사 분의 해결법

=> className을 이용한 접근법

---

ch3

• 기본 뼈대 코드

=> Meats를 클릭시 Meat의 하위 리스트들을 숨기는 작업을 하십시오. Meats를 재클릭하면, 숨겨졌던 하위 리스트들은 다시 보여져야 합니다.

• 나의 해결법

이 문제 해결시, 참고한 자료들,

• display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인
• visibility:hidden 과 display:none 차이점 및 사용법

• 강사 분의 해결법

=> classList의 toggle을 이용해서 풀었다.