이벤트 버블링과 캡처: DOM에서 이벤트 전파는 어떻게 작동합니까?

이벤트 버블링 및 캡처 이해

HTML DOM 이벤트에서 다른 요소 내의 요소가 이벤트를 트리거하면 이벤트가 다음을 통해 전파될 수 있습니다. 요소의 계층 구조. 선택한 이벤트 전파 모드에 따라 요소가 이벤트를 수신하는 순서가 변경됩니다.

이벤트 버블링

이벤트 버블링을 사용하면 이벤트가 먼저 캡처되고 처리됩니다. DOM 계층 구조를 통해 "위로" 이동하는 가장 안쪽 요소입니다. 결과적으로 이벤트 대상 요소가 이벤트를 먼저 처리한 다음 그 상위 요소 등이 처리됩니다.

이벤트 캡처

반면, 이벤트 캡처의 경우 이벤트는 가장 바깥쪽 요소에 의해 먼저 캡처되고 계층 구조를 통해 "아래로" 전파됩니다. 따라서 루트 요소는 하위 요소보다 먼저 이벤트를 처리합니다.

버블링과 캡처 선택

이벤트 버블링 또는 캡처 선택은 원하는 이벤트 처리 동작에 따라 달라집니다. .

• 이벤트를 처리해야 하는 경우 버블링을 사용하세요. 여러 요소에 의해 처리되며 처리 순서는 중요하지 않습니다. 이벤트 처리를 상위 요소에 위임하는 데에도 유용합니다.
• 이벤트가 대상 요소에 도달하기 전에 개입해야 하는 경우 캡처를 사용하세요. 이는 기본 동작을 방지하거나 다양한 요소 유형에 걸쳐 이벤트를 일관되게 처리하는 데 자주 사용됩니다.

예

HTML 구조에서:

<div>