[Javascript]Event capturing 이란?

[Javascript]Event capturing 이란?

 

DOM 요소에서 이벤트가 발생하는 경우 해당 이벤트는 해당 요소에서만 완전히 발생하지 않습니다. 캡처 위상에서 이벤트는 윈도우에서 이벤트를 트리거한 요소까지 모두 시작됩니다.

 

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

 

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

 

아래는 JS code입니다.

 

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');
  }, true);

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

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

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

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

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

});

 

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