js challenge day 25

Event Capture, Propagation, Bubbling and Once

 

Code

  <script>
    const divs = document.querySelectorAll('div');
    const button = document.querySelector('button');

    function logText(e) {
      console.log(this.classList.value);
      // e.stopPropagation(); // stop bubbling!
      // console.log(this);
    }

    divs.forEach(div => div.addEventListener('click', logText, {
      capture: false,
      once: true
    }));
    button.addEventListener('click', () => {
      console.log('Click!!!');
    }, {
      once: true
    });
  </script>

배운 점 & 느낀 점

이벤트 캡처링, 이벤트 버블링, 이벤트 위임에 대해서 다시 한번 복습하는 시간을 가졌습니다.

once라는 옵션은 처음 봤는데, 해당 이벤트를 한번 발생시키고 싶을 때 쓰는 옵션이었습니다.

once 옵션을 쓰니까 좀 더 이해가 잘되었던 것 같습니다.

 

이벤트 캡처링은 이벤트가 발생한 요소로 들어가는 과정,

이벤트 버블링은 이벤트가 발생한 요소에서 빠져나가는 과정

캡처링은 default가 false이기 때문에, 캡처링 과정에서 이벤트를 발생 시키고 싶으면 설정을 해줘야합니다.

이벤트위임은, 모든 노드에 이벤트를 저장하지않고 부모요소에 이벤트를 저장하여 버블링을 이용하는 패턴 입니다.