수정하기 - 자바스크립트에서 이벤트 버블링(Event Bubbling)과 캡처링(Capturing)이란 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

<a href='https://sangseek.com/sangseeks/이벤트 버블링/ko'>이벤트 버블링</a>(Event Bubbling)과 캡처링(Capturing)은 웹 개발에서 DOM(Document Object Model) 이벤트가 전파되는 두 가지 주요 방식입니다. 이 두 개념은 이벤트가 발생했을 때, 해당 이벤트가 어떤 순서로 요소들에 전달되는지를 설명합니다. 이를 이해하는 것은 JavaScript에서 이벤트 처리 및 사용자 인터페이스의 상호작용을 효과적으로 관리하는 데 매우 중요합니다.           1. 이벤트 버블링 (Event Bubbling)    이벤트 버블링은 이벤트가 발생한 요소(타겟 요소)에서 시작하여 그 요소의 부모 요소로 전파되는 방식입니다. 즉, 이벤트는 가장 깊은 자식 요소에서 시작하여 DOM 트리의 상위 요소로 올라가면서 발생합니다. 이 과정에서 각 요소는 이벤트를 처리할 수 있는 기회를 가집니다.    예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다:    ```html  <div id="parent">      <div id="child">Click me!</div>  </div>  ```    여기서 `  child` 요소를 클릭하면, 클릭 이벤트는 다음과 같은 순서로 전파됩니다:    1. `  child` 요소에서 이벤트 발생  2. `  parent` 요소로 이벤트 전파    이벤트 버블링의 장점은 부모 요소에서 자식 요소의 이벤트를 처리할 수 있는 기능을 제공하여, 코드의 중복을 줄이고 이벤트 처리를 중앙 집중화할 수 있다는 점입니다. 예를 들어, `  parent` 요소에 클릭 이벤트 리스너를 추가하면, `  child` 요소를 클릭할 때도 해당 이벤트를 처리할 수 있습니다.    ```javascript  document.getElementById('parent').addEventListener('click', function() {      alert('Parent clicked!');  });    document.getElementById('child').addEventListener('click', function() {      alert('Child clicked!');  });  ```    위 코드를 실행하면, `  child` 요소를 클릭했을 때 두 개의 알림이 순서대로 나타납니다. 먼저 "Child clicked!"가 나타나고, 그 다음에 "Parent clicked!"가 나타납니다.           2. <a href='https://sangseek.com/sangseeks/이벤트 캡처링/ko'>이벤트 캡처링</a> (Event Capturing)    이벤트 캡처링은 이벤트가 DOM 트리의 <a href='https://sangseek.com/sangseeks/최상위/ko'>최상위</a> 요소에서 시작하여 타겟 요소로 내려가는 방식입니다. 즉, 이벤트는 부모 요소에서 시작하여 자식 요소로 전파됩니다. 이 방식은 이벤트가 발생한 요소에 도달하기 전에 모든 부모 요소가 이벤트를 처리할 수 있는 기회를 제공합니다.    위의 예제를 캡처링 방식으로 처리해보면, 다음과 같은 순서로 이벤트가 전파됩니다:    1. `  parent` 요소에서 이벤트 발생  2. `  child` 요소로 이벤트 전파    이벤트 캡처링을 사용하려면, `addEventListener` 메서드의 세 번째 인자로 `true`를 전달해야 합니다. 예를 들어:    ```javascript  document.getElementById('parent').addEventListener('click', function() {      alert('Parent clicked!');  }, true);    document.getElementById('child').addEventListener('click', function() {      alert('Child clicked!');  }, true);  ```    위 코드를 실행하면, `  child` 요소를 클릭했을 때 "Parent clicked!"가 먼저 나타나고, 그 다음에 "Child clicked!"가 나타납니다. 이는 이벤트가 부모 요소에서 자식 요소로 전파되기 때문입니다.           3. 버블링과 캡처링의 사용    <a href='https://sangseek.com/sangseeks/대부/ko'>대부</a>분의 경우, 이벤트 버블링이 더 일반적으로 사용됩니다. 이는 사용자 인터페이스에서 자주 발생하는 상호작용을 처리하는 데 유용하기 때문입니다. 예를 들어, 여러 개의 버튼이 있는 리스트에서 각 버튼에 대한 클릭 이벤트를 부모 요소에서 처리하면, 코드의 중복을 줄일 수 있습니다.    반면, 이벤트 캡처링은 특정 상황에서 유용할 수 있습니다. 예를 들어, 특정 요소가 다른 요소의 이벤트를 가로채고 싶을 때 사용할 수 있습니다. 또한, 캡처링을 통해 이벤트가 발생하기 전에 특정 로직을 실행할 수 있습니다.           4. 이벤트 전파 중단    이벤트 전파는 필요에 따라 중단할 수 있습니다. `stopPropagation()` 메서드를 사용하면 이벤트가 더 이상 전파되지 않도록 할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:    ```javascript  document.getElementById('child').addEventListener('click', function(event) {      alert('Child clicked!');      event.stopPropagation(); // 이벤트 전파 중단  });  ```    위의 코드에서 `  child` 요소를 클릭하면 "Child clicked!"가 나타난 후, `  parent` 요소로의 이벤트 전파가 중단됩니다. 따라서 "Parent clicked!"는 나타나지 않습니다.           결론    이벤트 버블링과 캡처링은 JavaScript에서 이벤트를 처리하는 두 가지 중요한 메커니즘입니다. 이 두 가지 방식을 이해하고 적절히 활용하면, 복잡한 사용자 인터페이스에서의 이벤트 처리를 보다 효과적으로 관리할 수 있습니다. 이벤트 전파의 흐름을 이해하고, 필요에 따라 이벤트를 중단하는 방법을 익히는 것은 웹 개발에서 중요한 기술 중 하나입니다.