이벤트 버블링과 캡처링

 

 

 

1. 이벤트 버블링

• 이벤트가 대상 요소에서 시작해 문서 트리의 최상단으로 이동하는 단계 / 하위요소가 상위요소로 다시 올라가는 단계
• 이벤트가 이동하는 동안 각 부모 요소에서 등록된 이벤트 핸들러가 순차적으로 실행된다.

 

2. 이벤트 캡처링

• 이벤트가 문서 트리의 최상단에서 시작하여 이벤트가 발생한 요소까지 이동하는 단계 / 상위에서 하위요소로 향한다.

3. 이벤트 전파 막기

• event.stopPropagation() 
  • 상위 요소로의 이벤트 전파를 막기 위한 메서
  • 만약 이벤트가 전파되어 상위엘리먼트에서 발생한 이벤트가 하위엘리먼트에서 발생한 이벤트 결과에 의도치 않은 결과를 주는 경우 자주 사용
• event.preventDefault()
  • html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드
  • 예를 들어, <a> 태그를 클릭하면 일반적으로 브라우저는 링크를 따라 이동하게 된다. 그러나 이벤트 핸들러 내에서 event.preventDefault()를 호출하면 링크의 기본 동작이 중단되어 페이지 이동이 발생하지 않는
    

document.querySelector('a').addEventListener('click', function(event) {
  // 이벤트의 기본 동작을 중단
  event.preventDefault();

  // 여기에 추가적인 로직을 추가할 수 있음
  console.log('링크 클릭 이벤트가 발생했지만 기본 동작을 중단시켰습니다.');
});