[중앙정보처리학원] DOM* 이벤트 객체와 전파

이벤트 전파

• 이벤트 전파 (event propagation)는 이벤트가 다른 요소에게 전이되는 것을 의미합니다

 

 

 

• 캡쳐링(capturing): 이벤트가 상위요소에서 하위요소로 전파
• 타깃 단계(target phase): 이벤트가 타깃에 도달
• 버블링(bubbling): 이벤트가 하위요소에서 상위요소로 전파

 

이벤트 캡처링(Event Capturing)

캡처링을 사용하려면, addEventListener 함수에 세 번째 인자로 true 값을 주어야 합니다. 예를 들어:

 

element.addEventListener('click', function(event) {
  // 핸들러 로직
}, true); // 캡처링 단계에서 이벤트를 처리하기 위해 true 값을 설정

 

 

 

이벤트 버블링(Event Bubbling)

버블링을 막으려면, 이벤트 객체의 stopPropagation() 메서드를 사용할 수 있습니다. 이는 이벤트가 더 이상 전파되지 않도록 합니다.

element.addEventListener('click', function(event) {
  event.stopPropagation(); // 이벤트 버블링을 중단
  // 핸들러 로직
});

 

 

이벤트 버블링과 캡처링의 사용 사례

• 이벤트 위임(Event Delegation): 버블링을 활용하여, 여러 자식 요소 대신 상위 요소에 단 하나의 이벤트 리스너를 추가함으로써 메모리 사용을 최적화. 이벤트 위임은 특히 이벤트 리스너를 관리할 때 유용합니다.
• 이벤트 취소: 특정 조건에서 이벤트의 기본 동작을 방지하거나, 이벤트 전파를 중단할 필요가 있을 때 캡처링과 버블링을 사용할 수 있습니다.

 

 

 

 

 

PreventDefalut

$link.addEventListener('click', e => {
      if (!confirm('깃허브로 이동합니까??')) {
        e.preventDefault(); // 태그의 기본 자바스크립트 기능 중지
      }
    });

    const $form = document.getElementById('my-form');

    $form.addEventListener('submit', e => {
      e.preventDefault(); // submit기능 해제
      if($form.firstElementChild.value === '') {
        return;
      }
      console.log('양식을 서버에 제출함');
      // $form.submit();
    });

 

이벤트 쓰다 자꾸 새로고침 날 때 써서 막음됨