Event Capture, Propagation, Bubbling and Once

목표

이벤트 캡쳐 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출
이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출
을 구현해보고 알아봄.

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Understanding JavaScript's Capture</title>
</head>
<body class="bod">
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
<button>button</button>
<script>

</script>
</body>
</html>

과정

  1. 상수 선언
  2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
  3. div, button에 대해 이벤트리스너 생성

코드 분석

  1. 상수 선언

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

    divbutton 태그를 각각의 변수에 담는다

  2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
    ```
    function logText(e) {
    console.log(this.classList.value);
    }
    이벤트가 발생하면 클래스의 값들을 콘솔에 출력

  3. div, button에 대해 이벤트리스너 생성

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

    div를 클릭시 logText를 최하위 태그부터 실행되며, 한번만 이벤트를 받게하고,
    button 클릭시 콘솔에 메세지가 나오도록 입력

찾아본 내용, 알게된 내용들

capture, once - DOM Listener로 capture는 최상단에서 설명한 capturing, bubbling을 선택하는 것이고, once는 이벤트를 한번만 실행하고 이벤트리스너를 삭제한다는 뜻

'개발 > JavaScript30' 카테고리의 다른 글

27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18

+ Recent posts