이벤트 캡처링 버블링 타켓팅

  <div id="element1" class="box">

    <div id="element2" class="box2">버블링</div>

  </div>

  <div id="element3" class="box">

    <div id="element4" class="box2">캡처링</div>

  </div>

 

 

const element1 = document.querySelector('#element1');

const element2 = document.querySelector('#element2');

const element3 = document.querySelector('#element3');

const element4 = document.querySelector('#element4');

element1.addEventListener('click', e=>{console.log('element1 clicked')});

element2.addEventListener('click', e=>{console.log('element2 clicked')});

element3.addEventListener('click', e=>{console.log('element3 clicked')});

element4.addEventListener('click', e=>{console.log('element4 clicked')});

 

 

버블링은 자식을 선택해도 그 위의 조상이나 부모까지 영향이 가는 것.

element2를 클릭하면 element1과 element2 둘다 이벤트가 실행 됨.

 

캡쳐링은 이벤트를 등록하는 것.

 

타켓팅은 이벤트 로직을 수행하는 것.

참고로 element4를 클릭해서 element3에 e.target을 찍어봐도 element4가 나옴.

e.target은 실질적으로 클릭한 요소임.

타겟은 클릭한 element4이지만 버블링 해서 그 부모의 클릭 이벤트 까지도 같이 발동 된 듯.