[event]Bubbling & capturing

이벤트 핸들링

• 이벤트가 발생했을 때 이에 맞는 상황을 지정 해주고 처리 하는 것
• 이벤트 핸들링을 하기 위해 이벤트를 받을 화면 요소를 선택하고, 그 요소와 이벤트를 연결해 주는 것을 이벤트 바인딩이라고 함

이벤트 흐름

이벤트 흐름은 3가지 단계로 생명주기가 구성됨

• 이벤트 캡처링
• 타겟
• 이벤트 버블링

이벤트 캡처링

이벤트 흐름이 부모 노드(상위요소)에서 자식 노드(하위요소)로 향함

이벤트 버블링

이벤트 흐름이 자식 노드(하위요소)에서 부모 노드(상위요소)로 향함

이벤트 차단

stopPropagation() 웹 API는 해당 이벤트가 전파되는 것을 막습니다. 따라서, 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해합니다.
그리고 이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않습니다.

      outer.addEventListener('click', event => {
          console.log(`outer: ${event.currentTarget}, ${event.target}`)
      });
      middle.addEventListener('click', event => {
          console.log(`middle: ${event.currentTarget}, ${event.target}`)
      });
      button.addEventListener('click', event => {
          console.log(`button1: ${event.currentTarget}, ${event.target}`)
          event.stopPropagation(); // 전달하는 것을 그만
          event.stopImmediatePropagation(); // 자신만 전달해 
      });
      button.addEventListener('click', event => {
          console.log(`button2: ${event.currentTarget}, ${event.target}`)
      });

그러나 event.stopPropagation(), event.stopImmediatePropagation()를 사용하는 것을 지양해야 한다.
-> 내가 관심있는 타겟일 경우에만 이벤트를 처리할 수 있는 방법이 있다.

      outer.addEventListener('click', event => {
        if (event.target !== event.currentTarget) {
          return;
        }
        console.log(`outer: ${event.currentTarget}, ${event.target}`);
      });
      middle.addEventListener('click', event => {
        if (event.target !== event.currentTarget) {
          return;
        }
        console.log(`middle ${event.currentTarget}, ${event.target}`);
      });
      button.addEventListener('click', event => {
        console.log(`button1 ${event.currentTarget}, ${event.target}`);
      });
      button.addEventListener('click', event => {
        console.log(`button2 ${event.currentTarget}, ${event.target}`);
      });

Event 개념
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
Events 종류
https://developer.mozilla.org/en-US/docs/Web/Events