event.stopPropagation

• HTML 요소들은 이벤트 버블링이 일어난다.

<div onClick={() => alert('1')}>
  <ul onClick={() => alert('2')}>
    <li onClick={() => alert('3')}>
      <span onClick={() => alert('4')}></span>
    </li>
  </ul>
</div>

• 위 코드에서 span태그를 클릭하면 '4'만 alert가 나올 것 같지만 4 > 3 > 2 > 1 순으로 alert가 표출된다.
• 이렇게 부모에게 이벤드가 전파되는 버블링을 막기 위해 사용하는 것이 event.stopPropagation이다.

사용 방법

<div onClick={() => alert('1')}>
  <ul onClick={() => alert('2')}>
    <li onClick={() => alert('3')}>
      <span onClick={(e) => {
        alert('4');
        e.stopPropagation();
      }}></span>
    </li>
  </ul>
</div>

• 위 코드처럼 사용하면 alert는 '4'만 표출된다.

event.preventDefault와 차이점

• event.preventDefault는 a태그나 form태그들의 기본 동작을 막고 원하는 명령만 실행하는 것이고, stopPropagation은 부모로 전파되는 이벤트를 막는 것이다.