이벤트 전파

Shadcn의 드롭다운(Dropdown)은 특정 동작이나 기능 등을 Popover 형태로 표시하는 컴포넌트다. 드롭다운 메뉴 아이템(DropdownMenuItem)을 클릭했을 때 다이얼로그(혹은 AlertDialog)를 띄우려는 의도로 메뉴 아이템의 자식으로 다이얼로그를 추가할 수 있다. 하지만 이렇게 작성하면 다이얼로그가 제대로 열리지 않는다. 메뉴 열기 {/* ... */} ; Radix의 메뉴 아이템은 클릭했을 때 드롭다운이 자동으로 닫히도록 설계되어 있다. 때문에 다이얼로그를 띄우는 메뉴 아이템을 클릭하면, 드롭다운이 닫히는 기본 동작에 의해 다이얼로그가 열리지 마자 닫히는 문제가 발생한다. 위 문제로 StackOverFlow를 찾아보면 Dr..

실습용 CodePen💡 이벤트 버블링/캡처링, stopPropagation(), preventDefault()까지 모두 실습할 수 있도록 작성해둠. "> 이벤트 전파 | Event Propagation버블링 Bubbling / 캡처링 Capturing위 코드펜 예제에서 하단에 있는 span 태그를 클릭하면 ➊ "span 영역" → ➋ "p 영역" → ➌ "div" 영역 순으로 콘솔이 찍힌다. span 영역을 클릭한 순간 브라우저가 이벤트를 감지해서 최상위에 있는 요소까지 이벤트가 전달되는 것. 이것을 이벤트 버블링이라고 부른다. 이벤트 캡처링은 버블링 반대방향으로 진행된다. addEventListener() 3번째 인자에 true를 명시하면 된다. 이는 { capture: true } 를 명시한 ..