이벤트 전파

이벤트 전파

@2024.04.04

이벤트 전파

💡

이벤트가 DOM 요소에서 발생하고 상위 요소로 전파되는 방식으로 총 3가지 단계가 존재

• 기본적으로 이벤트는 capturing → targer → bubbling 단계 순으로 전파

이벤트 전파 중지

• stopPorpagation() 메서드 이용

  button.addEventListener('click', function(event) {
      event.stopPropagation();
      // 이벤트 핸들러 코드
  });

  • 이벤트가 해당 요소에서만 처리되고 상위 요소로의 이벤트 전파가 중지된다.

• addEventListener() 함수의 세 번째 매개변수로 true를 전달하면 캡처링 모드로 설정된다.

  element.addEventListener('click', function(event) {
      console.log('Element clicked!');
      event.stopPropagation(); // 이벤트 전파 중지
  }, true); //캡처링 모드

  • 해당 이벤트가 이벤트 타깃 요소까지만 전달되고, 하위 요소로의 전파가 중지된다.

이벤트 전파 방향

• 이벤트 핸들러를 등록할 때 세 번째 인자로 옵션 객체를 전달하여, 이벤트 전파 방식을 조절 가능
  • true : 캡처 단계, false : 버블링 단계이며, 기본 값 : 버블링 단계

캡처링

💡

자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여, 안쪽 자식 요소까지 도달

• 비교적 잘 사용하지 않는다.

  <form onclick="alert('form')">FORM
    <div onclick="alert('div')">DIV
      <p onclick="alert('p')">P</p>
    </div>
  </form>

  • <form> 클릭시 onclick 핸들러가 동작
    • document 객체에서부터 시작하여 이벤트가 캡처링 단계로 하위 요소로 이동
    • <form> 요소에 할당된 onclick 핸들러가 동작
    • 하위 요소인 <div> 요소에 할당된 onclick 핸들러가 동작
    • 그 다음 하위 요소인 <p> 요소에 할당된 onclick 핸들러가 동작
    • 맨 마지막 요소를 만날때까지 이를 반복
  • <p> 클릭 시에도 document 객체부터 시작하여 이벤트 발생

타깃

💡

이벤트가 발생한 요소에 이벤트 핸들러가 호출

• 이벤트가 발생한 가장 안쪽의 요소를 타깃 요소라고 부르며, event.target을 사용해 접근 가능

버블링

💡

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다.

• 가장 최상단의 조상 요소를 만날 때까지 이 과정을 반복하며, 요소 각각에 할당된 핸들러가 동작

  <form onclick="alert('form')">FORM
    <div onclick="alert('div')">DIV
      <p onclick="alert('p')">P</p>
    </div>
  </form>

  • <form> 클릭시 onclick 핸들러가 동작
    • document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작
  • <p> 클릭 시 onclick 핸들러가 동작
    • 바깥의 <div>에 할당된 onclick핸들러가 동작
    • 그 바깥에 <form>에 할당된 onclick핸들러가 동작
    • document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작

캡처링, 버블링 모션 비교 → 🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링) (tistory.com)

이벤트 위임

💡

다수의 하위 요소에 이벤트 리스너를 추가하는 대신, 상위 요소 하나의 이벤트 리스너를
추가하여, 하위 요소에서 발생한 이벤트를 처리하는 하는 게 효율적이다.

• 주로 이벤트 버블링을 활용하여 구현
  • 이벤트 핸들러에서는 event.target 속성을 통해 이벤트가 발생한 실제 요소를 확인하고 필요한 동작을 수행

• 주로 사용하는 상황
  • 동적으로 생성되는 요소에 대한 이벤트 처리
    • 리스트 아이템을 동적으로 추가하거나 제거할 때 각각의 리스트 아이템에 이벤트 리스너를 추가하는 대신, 리스트 컨테이너에 이벤트 리스너를 추가하여 리스트 아이템에서 발생한 이벤트를 처리
  • 메모리 사용 최적화
    • 하나의 상위 요소에 이벤트 리스너를 추가하는 것이 여러 요소에 개별적으로 이벤트 리스너를 추가하는 것보다 메모리 사용을 최적화할 수 있다.
  • 이벤트 핸들러 관리의 편의성
    • 여러 요소에 대한 이벤트 핸들러를 관리하는 것보다 하나의 핸들러로 모든 이벤트를 처리하는 것이 편리하다.