이벤트

JavaScript에서 이벤트란, "어떤 사건"을 나타내며 사용자가 클릭을 한다거나, 마우스를 움직인다거나 스크롤을 이동한다거나 입력을 한다는 등, 상호작용으로 인해 발생하는 사건을 말한다.
또한, 이러한 이벤트에 그에 맞는 반응을 하게 함수를 통해 반응을 하게 해주는데, 이를 이벤트 핸들러 라고 한다.

이벤트 버블링

이벤트 버블링이란 여러 요소들이 중첩되어 있을 때, 이중에 이벤트가 할당된 요소들이 있고, 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 중첩된 부모의 요소의 핸들러가 동작하는 것을 말한다.

다음과 같은 요소가 있고 다음 코드처럼 구성되어 있다고 보자

<div onClick={() => console.log('첫 번째 div가 클릭되었습니다.')}>
  <p>첫 번째 div</p>
  
  <div onClick={() => console.log('두 번째 div가 클릭되었습니다.')}>
    <p>두 번째 div</p>
    
    <div onClick={() => console.log('세 번째 div가 클릭되었습니다.')}>
      <p>세 번째 div</p>
    </div>
  </div>
</div>

다음 상태에서 "세번째 div"를 클릭하게되면 먼저
'세 번째 div가 클릭되었습니다.'가 출력되고, 그의 부모요소인
'두 번째 div가 클릭되었습니다.'가 출력되고 마지막으로 또 부모인
'첫 번째 div가 클릭되었습니다.'가 순차적으로 입력된다.

즉, 이벤트가 존재하지 않는 부모요소를 만날때까지 각 요소에 할당된 이벤트가 동작하게 되는데, 이를 이벤트 버블링이라고 한다.

그렇다면 이러한 이벤트 버블링을 방지하기 위해선 어떤 방법이 있을까?

stopPropagation()

stopPropagation() 메소드를 이용하면, 해당 이벤트가 발생하고, 이벤트 버블링을 방지할 수 있다.

<div onClick={() => console.log('첫 번째 div가 클릭되었습니다.')}>
  <p>첫 번째 div</p>
  
  <div onClick={() => console.log('두 번째 div가 클릭되었습니다.')}>
    <p>두 번째 div</p>
    
    <div onClick={(e) => {
      console.log('세 번째 div가 클릭되었습니다.')
      e.stopPropagation()
      }}>
      <p>세 번째 div</p>
    </div>
  </div>
</div>

위와는 달리 '세 번째 div가 클릭되었습니다.'가 출력된 후 e.stopPropagation()가 실행되어서, 두번째와 첫번째 div로 이벤트 버블링 되는것을 막을 수 있다.

이벤트 캡처링

이벤트 캡처링은 이벤트 버블링과는 반대로 부모요소로부터 자식요소를 찾아 내려간다.

캡처링 등록

브라우저의 이벤트 전파 방식은 버블링이 기본값이기 때문에 캡처링으로 설정하기 위해선 별도의 옵션을 함수에 주어야 한다. 자바스크립트 addEventListener() 함수의 3번째 매개변수로 true 값을 주면 이 이벤트 타겟은 캡처링을 통해 이벤트를 전파받아 호출되게 된다.

element.addEventListener('click', (e) => { ... }, true);

이렇게 캡처링 이벤트 전파 동작으로 등록하는 이유는, 브라우저는 캡쳐링으로 탐색하고 버블링으로 돌아오는데 갔다가 돌아오는 과정에서 이벤트가 똑같이 두번 실행하기 때문이다.

출처: https://inpa.tistory.com/entry/JS-📚-버블링-캡쳐링 [Inpa Dev 👨‍💻:티스토리] https://velog.io/@wlwl99/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-Event-bubbling