이벤트 버블링&캡쳐링 | 이벤트 전파 | stopPropagation() | preventDefault() | 웹개발 입문

🔍 이벤트 버블링과 캡처링의 이해

이벤트 버블링과 캡처링은 브라우저가 HTML 요소에서 이벤트를 처리하는 방식입니다. 이벤트 버블링은 특정 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 의미합니다. 반면, 캡처링은 최상위 요소에서 시작하여 자식 요소로 내려가는 과정을 말합니다. 이러한 두 흐름은 기본적으로 브라우저에서 자동으로 처리되며, 이를 이해하면 이벤트 핸들링을 보다 세밀하게 제어할 수 있습니다.

📊 HTML 요소와 이벤트 흐름

HTML 문서 구조 내에서 이벤트가 발생하면, 브라우저는 먼저 캡처링 단계를 거칩니다. 이 단계에서는 최상위 문서부터 이벤트가 발생한 요소까지 내려오며, 각 단계에서 이벤트 핸들러가 실행될 수 있습니다. 이후 이벤트 버블링 단계에서는 발생한 요소에서 다시 최상위 요소로 이벤트가 전파됩니다. 이러한 과정은 DOM 트리 구조를 통해 이해할 수 있으며, 자바스크립트의 addEventListener 메소드를 활용하면 각 단계에서의 동작을 제어할 수 있습니다.

🖼️ 이벤트 전파의 시각적 설명

이벤트 전파를 시각화하면 이해가 더욱 쉬워집니다. 예를 들어, HTML 요소가 중첩된 구조에서 최상위 요소부터 시작하여 특정 이벤트가 발생한 요소까지 내려가는 과정을 빨간색 화살표로 표시할 수 있습니다. 반대로, 이벤트가 발생한 요소에서 부모 요소로 다시 올라가는 과정은 파란색 화살표로 나타낼 수 있습니다. 이러한 시각적 설명은 이벤트 전파 과정을 명확하게 이해하는 데 도움이 됩니다.

🧪 자바스크립트에서 이벤트 리스너 사용

자바스크립트에서는 addEventListener 메소드를 사용하여 이벤트 핸들러를 등록합니다. 이 메소드의 세 번째 인자로 true를 전달하면, 해당 이벤트 리스너가 캡처링 단계에서 호출됩니다. 기본적으로는 버블링 단계에서 호출됩니다. 이러한 메소드를 통해 개발자는 특정 시점에서 이벤트를 처리하거나 전파를 막을 수 있습니다. 예를 들어, 특정 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 막아야 할 때 유용하게 사용할 수 있습니다.

🚫 이벤트 전파 차단 방법

이벤트 전파를 차단하는 것은 때때로 필요합니다. 자바스크립트에서는 event.stopPropagation() 메소드를 사용하여 이벤트 전파를 막을 수 있습니다. 이는 이벤트가 버블링 단계에서 더 이상 부모 요소로 전파되지 않도록 합니다. 또한, preventDefault() 메소드는 이벤트가 가진 기본 동작을 방지하는 데 사용됩니다. 예를 들어, <a> 태그의 기본 링크 이동 동작을 막고 싶을 때 유용합니다. 이러한 메소드를 적절히 사용하면 이벤트 관리가 더욱 정교해집니다.

🌐 공식사이트

공식 사이트 링크