[JavaScript 문법] 40일차: 이벤트 처리 심화

이벤트 전파

이벤트 전파(Event Propagation)는 이벤트가 발생한 요소에서 상위 요소로 전파되는 과정을 의미합니다. JavaScript에서는 이벤트 전파를 관리하기 위해 캡처링(Capturing) 단계와 버블링(Bubbling) 단계를 사용할 수 있습니다.

캡처링과 버블링

• 캡처링(Capturing): 이벤트가 상위 요소에서 하위 요소로 전파됩니다.
• 버블링(Bubbling): 이벤트가 하위 요소에서 상위 요소로 전파됩니다.

예제: 이벤트 캡처링과 버블링

<div id="grandparent">
  <div id="parent">
    <button id="child">Click me</button>
  </div>
</div>

<script>
  document.getElementById('grandparent').addEventListener('click', () => {
    console.log('Grandparent captured');
  }, true);

  document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent captured');
  }, true);

  document.getElementById('child').addEventListener('click', () => {
    console.log('Child clicked');
  });

  document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent bubbled');
  });

  document.getElementById('grandparent').addEventListener('click', () => {
    console.log('Grandparent bubbled');
  });
</script>

위 예제에서 버튼을 클릭하면 다음과 같은 순서로 로그가 출력됩니다:

1. Grandparent captured
2. Parent captured
3. Child clicked
4. Parent bubbled
5. Grandparent bubbled

이벤트 위임

이벤트 위임(Event Delegation)은 많은 자식 요소에 각각 이벤트 리스너를 등록하는 대신, 상위 요소에 하나의 이벤트 리스너를 등록하여 이벤트를 처리하는 방법입니다. 이는 성능을 향상시키고 코드의 가독성을 높이는 데 유용합니다.

 

예제: 이벤트 위임

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('list').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
      alert('Clicked: ' + event.target.textContent);
    }
  });
</script>

위 예제에서는 각 li 요소에 개별적으로 이벤트 리스너를 등록하지 않고, ul 요소에 이벤트 리스너를 등록하여 클릭된 li 요소를 처리합니다.

커스텀 이벤트

커스텀 이벤트(Custom Event)는 개발자가 정의한 이벤트로, 내장 이벤트와 동일하게 사용할 수 있습니다. 커스텀 이벤트는 CustomEvent 생성자를 사용하여 생성할 수 있습니다.

 

예제: 커스텀 이벤트 생성 및 디스패치

<button id="myButton">Click me</button>

<script>
  let button = document.getElementById('myButton');

  button.addEventListener('myCustomEvent', (event) => {
    console.log('Custom event detail:', event.detail);
  });

  let customEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Hello, World!' }
  });

  button.dispatchEvent(customEvent);
</script>

위 예제에서 버튼 요소에 커스텀 이벤트 리스너를 등록하고, 커스텀 이벤트를 생성하여 디스패치합니다. 결과적으로 콘솔에 커스텀 이벤트의 세부 정보가 출력됩니다.

이벤트 리스너 제거

이벤트 리스너를 제거하기 위해 removeEventListener 메서드를 사용할 수 있습니다.

 

예제: 이벤트 리스너 제거

<button id="myButton">Click me</button>

<script>
  let button = document.getElementById('myButton');

  function handleClick() {
    alert('Button clicked!');
  }

  button.addEventListener('click', handleClick);

  // 이벤트 리스너 제거
  button.removeEventListener('click', handleClick);
</script>

위 예제에서는 버튼 클릭 시 알림을 표시하는 이벤트 리스너를 등록하고, 이후 해당 이벤트 리스너를 제거합니다.

결론

이벤트 처리 심화는 웹 페이지의 상호작용을 더욱 세밀하게 제어할 수 있는 방법을 제공합니다. 이번 글에서는 이벤트 전파, 이벤트 위임, 커스텀 이벤트, 이벤트 리스너 제거에 대해 배웠습니다. 다음 글에서는 폼 이벤트 처리에 대해 알아보겠습니다.

다음 글에서 만나요!