[Javascript]Event bubbling이란?

[Javascript]Event bubbling이란?

 

DOM 요소에서 이벤트가 발생하는 경우 해당 이벤트는 해당 요소에서만 완전히 발생하지 않습니다. 버블링 단계에서는 이벤트가 버블업으로 진행되거나 이벤트가 부모, 조부모, 조부모에게 창까지 도달할 때까지 진행됩니다.

 

예를 들면 이런 마크업이 있습니다.

 

 <div class="grandparent">
    <div class="parent">
      <div class="child">1</div>
    </div>
  </div>

 

JS 코드입니다.

 

 

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

 

 

addEventListener 메서드에는 세 번째 선택적 매개 변수 useCapture(기본값이 false인 캡처)가 있습니다. 이벤트가 캡처 단계에서 true가 발생하면 bubbling 단계에서 이벤트가 발생합니다. 하위 요소를 클릭하면 콘솔에 자식, 부모, 조부모, html, 문서 및 창이 각각 기록됩니다. 이것이 event bubbling 입니다.