반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

꿈꾸는 개발자

Javascript 이벤트 버블링/캡처링 본문

프로그래밍언어/Javascript

Javascript 이벤트 버블링/캡처링

rickysin 2023. 1. 13. 14:50

버블링(bubbling) 

정의: 버블링은 한 요소의 이벤트가 발생하면 해당 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작하는 형식을 말한다. 해당 과정은 가장 최상단의 요소(document 객체)를 만날 때까지 반복된다. 

출처: javascript info

  • 위 사진에서 <p>태그 영역을 클릭하게 되면 p 태그에 할당된 헨들러만 동작되는 것이 아닌, div, form에 있는 핸들러들까지 순차적으로 작동하게 된다! => 이처럼, p는 가된 element에서 가장 최상단 요소까지 핸들러가 동작하게 되는 것이다.
  • 거의 모든 이벤트는 버블링 된다(즉 예외는 존재함!) => ex) focus이벤트는 버블링X

Event.target

  • event.targe로 이번트가 발생한 target요소에 접근 가능! 
  • event.target vs this(=event.currentTarget)
    • event.target은 실제로 이벤트가 발생한 타겟을 지칭한다(버블링 영향X)
    • this: 현재 실행 중인 '타깃' (버블링 영향 O)

버블링 중단하기

  • 이벤트 <html>요소를 거쳐서 document 객체를 만날 때까지 진행되기도 한다 
    • 이벤트 객체 메서드인 event.stopPropagation()을 사용하면 됨! 
      • 단점: 위로 올라가는 핸들러는 막아주지만, 한 요소가 여러 이벤트가 있을 경우 이를 막아주진 못한다.
      • 같은 요소의 다른 핸들러의 이벤트도 막으려면, event.stopImmediatePropagation()을 사용하면 된다! 
    • 주의점: event.stopImmediatePropagation()의 사용을 주의! =>추후에 문제를 만들 수도! 
      • ex) 사람들의 메뉴 클릭 데이터를 분석할 때 document.addEventListener('click',...)을 사용하는 경우가 존재함=> 버블링을 막아놓으면, 해당 데이터 분석을 할 수가 없음
        • 보통, 이벤트 버블링을 막을 경우는 발생X =>차라리 event 객체를 통해 다른 핸들러에서 읽을 수 있게 하면, 이벤트 버블링을 통제할 수 있음

캡처링(Capturing):

 

출처: 포이마웹(poiemaweb.com/js-event)

이벤트의 흐름:

  • 이벤트의 흐름 중 3가지 단계가 존재한다
    • 캡쳐링 단계 - 이벤트가 하위 요소로 전파되는 단계 
    • 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계 (evet.target에 해당하는 요소) 
    • 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계
  • <td>를 클릭했을 때 이벤트의 흐름, td클릭=> 최상위에서 아래로 전파됨(캡처링 단계) => 이벤트가 타깃 요소에 도착 및 실행(타깃 단계) => 다시 위로 전파(버블링 단계) ------해당 과정을 통해 이벤트 핸들러가 호출된다! 
  • javascript.info에 따르면 캡쳐링을 사용해야 할 경우는 거의 없다함!

캡쳐링 단계 이벤트 잡아내기:

  • 갭쳐링 단계에서 이벤트를 잡아내려면 addEventListener의 capture 옵션(3 번째 인수로 전달하면 됨) true로 설정을 해야 한다!
    • capture: false (default 값) => 버블링 단계에서 핸들러 동작
    • capture: true => 캡쳐링 단계에서 핸들러 동작
  • removeEventListener을 사용하면 핸들러를 지울 수 있음 

 

 

출처: 

 

Event | PoiemaWeb

이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. 이벤트가 발

poiemaweb.com

 

'프로그래밍언어/Javascript' Related Articles more