[JavaScript 30일 챌린지] : 25일차

<script>

  constdivs=document.querySelectorAll('div');
  constbutton=document.querySelectorAll('button');

  function logText(e) {
console.log(this.classList.value);
  }

divs.forEach(div => div.addEventListener('click', logText, {
    capture: false,
    once: true
  }));

button.addEventListener('click', () => {
console.log('Click!!!');
  }, {
    once: true
  });

</script>

Event Capture, Propagation, Bubbling and Once에 대한 프로젝트이다.

 

Bubbling은 요소의 이벤트가 시작되면 부모 요소부터 쭉 동작하게 된다. 마치 거품이 물 속에서 위로 올라가는 것과 비슷하다.

 

once:true를 주면서 1회만 실행이 되도록 설정했다.

 

📝 이 페이지를 참고해서 공부했다.