JavaScript 이벤트 버블링과 캡처링 이해

JavaScript 이벤트 이해하기

웹 페이지에서는 사용자가 수행하는 다양한 행동, 즉 클릭, 스크롤, 입력 등이 발생합니다. 이러한 행동들은 모두 이벤트로 분류됩니다. 이벤트는 웹 애플리케이션에서 중요한 역할을 하며, 사용자와의 상호작용을 가능하게 합니다. 이번 글에서는 JavaScript의 이벤트 처리, 이벤트 버블링 및 캡처링에 대해 알아보도록 하겠습니다.

이벤트란 무엇인가?

이벤트는 사용자가 웹 브라우저를 통해 진행하는 거의 모든 동작을 포괄합니다. 예를 들어, 버튼 클릭, 마우스 움직임, 키보드 입력 등이 이벤트에 해당합니다. 이러한 다양한 이벤트에 대해 우리는 어떠한 방식으로 반응할지를 정의하는 작업을 ‘이벤트 등록’이라고 부릅니다.

이벤트 등록 방법

특정 요소에 이벤트를 등록하는 방법은 크게 두 가지로 나눌 수 있습니다:

• 요소에 직접 이벤트를 등록하는 방법
• DOM을 이용하여 지정된 요소에 이벤트를 등록하는 방법

이벤트 핸들링에 대해

이벤트 핸들링이란 특정 이벤트가 발생했을 때 어떤 동작을 수행하도록 하는 것입니다. 이 과정을 위해 개발자는 이벤트 핸들러를 등록합니다. 예를 들어, 사용자로부터 입력을 받기 위해 폼이 제출될 때 특정 작업을 수행하도록 코드 블록(함수)을 작성할 수 있습니다. 이때 ‘return false’ 문을 사용하여, 제출이벤트 발생 후 서버로 데이터가 전송되지 않도록 할 수 있습니다.

이벤트 객체란?

이벤트가 발생할 때마다 생성되는 ‘이벤트 객체’는 해당 이벤트에 대한 다양한 정보와 속성을 포함하고 있습니다. 이 객체는 이벤트가 발생한 요소에 대한 정보를 포함하며, 주요 속성으로는 이벤트 유형을 나타내는 type과 발생 대상인 target이 있습니다.

이벤트 리스너 호출

이벤트 리스너가 등록되고 해당 요소에 특정 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출합니다. 이때 이벤트 객체는 인수로 전달되어, 사용자가 어떤 이벤트를 발생시켰는지 알 수 있게 됩니다. 예를 들어, 버튼 클릭 시 클릭 이벤트가 발생하고, 버튼에 등록된 이벤트 리스너가 실행됩니다.

이벤트 전파 이해하기

이벤트 전파는 이벤트가 발생했을 때, 브라우저가 해당 이벤트 리스너를 어떻게 호출할지를 결정하는 과정입니다. 전파 방식은 크게 두 가지로 나뉩니다:

• 버블링(Bubbling)
• 캡처링(Capturing)

버블링(Bubbling) 전파 방식

버블링은 이벤트가 발생한 요소에서 시작하여 부모 요소로 올라가는 전파 방식입니다. 즉, 하위 요소에서 발생한 이벤트가 부모 요소로 전파되며, 이 과정에서 각 단계에서 등록된 이벤트 리스너가 순차적으로 호출됩니다.

캡처링(Capturing) 전파 방식

캡처링은 전파의 반대 방향으로, 최상위 요소에서부터 행사되는 방식입니다. 이벤트는 부모 요소에서 시작하여 하위 요소로 내려가며, 이 과정에서 각 리스너가 호출됩니다. 캡처링을 사용하기 위해서는 addEventListener() 메소드의 세 번째 인자로 true를 전달해야 합니다.

이벤트 기본 동작의 취소

특정 이벤트는 기본 동작을 갖고 있습니다. 예를 들어, 링크 클릭 시 새로운 페이지로 이동하는 동작입니다. 이 기본 동작을 중지하고 싶다면, event.preventDefault() 메소드를 사용할 수 있습니다. 또한 이벤트 전파를 중단하려면 event.stopPropagation() 메소드를 사용할 수 있습니다.

이벤트 위임(Event Delegation)

이벤트 위임은 비슷한 행동을 하는 여러 요소가 있을 때, 각 요소에 개별적으로 이벤트 핸들러를 등록하는 대신, 공통 조상 요소에 하나의 핸들러를 등록하여 효율적으로 관리하는 기법입니다. 이로 인해 코드의 양이 줄어들고, 성능이 향상됩니다.

결론

JavaScript의 이벤트 시스템은 웹 페이지에서 사용자와의 상호작용을 풍부하게 만들어줍니다. 이벤트 등록, 이벤트 핸들링, 버블링 및 캡처링, 기본 동작의 취소, 이벤트 위임 등 다양한 기법을 활용하여 좀 더 나은 사용자 경험을 제공할 수 있습니다. 이러한 기본 원리를 이해하고 응용하면, 더 효율적이고 반응형인 웹 애플리케이션을 개발하는 데 큰 도움이 될 것입니다.

자주 물으시는 질문