JavaScript 이벤트는 동적 사용자 상호 작용을 허용하는 웹 개발의 중요한 측면입니다. 이벤트는 버튼 클릭, 요소 위로 마우스 이동 또는 키 누르기와 같이 웹 페이지에서 발생하는 작업입니다. 이러한 작업에 대한 응답으로 JavaScript는 콘텐츠 표시 또는 요소 모양 변경과 같은 특정 기능을 실행할 수 있습니다.

이벤트의 가장 일반적인 예 중 하나는 클릭 이벤트입니다. 사용자가 요소를 클릭하면 클릭 이벤트가 트리거됩니다. 개발자는 이벤트 리스너를 사용하여 이 이벤트를 수신하고 응답으로 코드를 실행할 수 있습니다. 마찬가지로 요소 위로 마우스를 가져가면 추가 정보를 표시하거나 요소의 모양을 수정하는 데 사용할 수 있는 마우스 오버 이벤트가 트리거될 수 있습니다.

이벤트 전파

이벤트 자체를 이해하는 것 외에도 이벤트 전파를 이해하는 것도 중요합니다. 전파는 이벤트가 웹 페이지의 요소를 나타내는 계층 구조인 DOM(문서 개체 모델) 트리를 통해 이동하는 방식을 나타냅니다. 이벤트는 가장 안쪽 요소(이벤트가 트리거된 위치)에서 가장 바깥쪽 요소(트리의 루트)로 또는 그 반대로 전파됩니다.

일반적으로 이벤트 흐름 프로세스는 이벤트 캡처, 이벤트 대상 및 이벤트 버블링의 세 단계로 완료됩니다.

이벤트 버블링

버블링은 이벤트가 가장 안쪽 요소에서 먼저 트리거된 다음 트리의 루트에 도달할 때까지 상위 요소를 통해 바깥쪽으로 이동하는 기본 동작입니다.

<div id="parent">
  <div id="child">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  const btn = document.getElementById('btn');

  parent.addEventListener('click', () => {
    console.log('Event bubbled from parent element');
  });

  child.addEventListener('click', () => {
    console.log('Event bubbled from child element');
  });

  btn.addEventListener('click', () => {
    console.log('Event bubbled from button element');
  });
</script>

//Output
//Event bubbled from button element
//Event bubbled from child element
//Event bubbled from parent element

1. 버튼 요소 이벤트 핸들러
2. 하위 요소 이벤트 핸들러
3. 상위 요소 이벤트 핸들러

캡처는 그 반대입니다. 여기서 이벤트는 가장 바깥쪽 요소에서 먼저 트리거된 다음 가장 안쪽 요소에 도달할 때까지 자식 요소를 통해 안쪽으로 이동합니다.

<div id="parent">
  <div id="child">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  const btn = document.getElementById('btn');

  parent.addEventListener('click', () => {
    console.log('Event captured at parent element');
  }, true);

  child.addEventListener('click', () => {
    console.log('Event captured at child element');
  }, true);

  btn.addEventListener('click', () => {
    console.log('Event captured at button element');
  }, true);
</script>

//Output
//Event captured at parent element
//Event captured at child element
//Event captured at button element

1. 상위 요소 이벤트 핸들러
2. 하위 요소 이벤트 핸들러
3. 버튼 요소 이벤트 핸들러

개발자는 stopPropagation() 메서드를 사용하여 이벤트 전파를 제어할 수 있습니다. 이 메서드는 캡처 및 버블링 단계에서 이벤트가 DOM을 통해 더 이상 전파되지 않도록 하여 개발자가 이벤트 범위를 특정 요소로 제한할 수 있도록 합니다. 그러나 기본 동작이 발생하는 것을 막지는 않습니다.

<div id="parent">
  <div id="child">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  const btn = document.getElementById('btn');

  parent.addEventListener('click', (event) => {
    console.log('Event captured at parent element');
  }, true);

  child.addEventListener('click', (event) => {
    console.log('Event captured at child element');
    event.stopPropagation(); // stop event propagation
  }, true);

  btn.addEventListener('click', (event) => {
    console.log('Event captured at button element');
  }, true);
</script>

//Output
//Event captured at parent element
//Event captured at child element

1. 상위 요소 이벤트 핸들러
2. 하위 요소 이벤트 핸들러

결론적으로 이벤트 및 이벤트 전파를 이해하는 것은 동적 및 대화형 웹 페이지를 개발하는 데 중요합니다. 이벤트 리스너를 사용하고 이벤트 전파를 제어함으로써 개발자는 의미 있는 방식으로 사용자 작업에 응답하는 풍부한 사용자 경험을 만들 수 있습니다.