Javascript

Javascript - 이벤트 버블링과 캡처링

개발따라김양 2022. 11. 15. 19:44

0.  이벤트 버블링과 캡처링

  • 버블링
    • 이벤트가 발생한 요소로부터 window까지 이벤트를 전파
  • 캡처링
    • window로부터 이벤트가 발생한 요소까지 이벤트를 전파
  • 버블링과 캡처링, 두 타입의 이벤트 핸들러가 모두 존재하는 경우에,
    캡처링 단계가 먼저 실행되고, 이어서 버블링 단계가 실행됩니다.

https://mygumi.tistory.com/315

1. 이벤트 버블링(event bubbling)

  • 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다.
    가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
  • 브라우저는 선택된 요소가 버블링 단계에 대해 그것에 등록된 onclick 이벤트 핸들러를 가지고 있는지 확인하기 위해 검사하고,
    만약 그렇다면 실행합니다.
  • 그리고서 그것은 바로 다음의 조상 요소로 이동하고 같은 일을 하고, 그리고서 그 다음 요소로 이동하고, 
    <html> 요소에 닿을 때까지 계속합니다.

2. 이벤트 캡처링(event capturing)

  • 브라우저는 요소의 가장 바깥쪽의 조상 (<html>)이 캡처링 단계에 대해
    그것에 등록된 onclick 이벤트 핸들러가 있는지를 확인하기 위해 검사하고, 만약 그렇다면 실행합니다.
  • 그리고서 <html> 내부에 있는 다음 요소로 이동하고 같은 것을 하고,
    그리고서 그 다음 요소로 이동하고, 실제로 선택된 요소에 닿을 때까지 계속합니다.

3. 덧붙여서...

  • addEventListener()
target.addEventListener(type, listener, useCapture)

//type - 수신할 이벤트 유형
//listener - 지정할 이벤트를 수신할 객체
//useCapture - 옵션, 수신기가 먼저 발동돼야 함을 나타내는 불리언 값
  • Event.stopPropagation()
    • 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지
    • 전파를 방지해도 이벤트의 기본동작은 실행되므로 링크나 버튼의 클릭을 막는 것이 아님
      • 비교 ) preventDefault()
        • 어떤 이벤트를 명시적으로 처리하지 않은 경우,
          해당 이벤트에 대한 사용자          의 기본 동작을 실행하지 않도록 지정
event.stopPropagation();

 

 

 

 

출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events

 

이벤트 입문 - Web 개발 학습하기 | MDN

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주

developer.mozilla.org

 

저작자표시