TIL #17 1차 프로젝트 회고(part.2 stopPropagation(), preventDefault())

form 태그 내에서 button을 사용하던 도중 버튼 클릭 시 페이지가 저절로 새로고침 되는 현상을 발견했다.....!🤔

 

 

원인을 찾아보니 form태그 내의 button은 클릭 시, 브라우저에서 자동으로 submit 이벤트를 실행하도록 지정되어 있다는 사실을 알았다.

(이제야...?🤫)

 

아무 생각없이 그러면 이벤트를 막아주면 되겠지? 하고 이벤트 객체의 stopPropagation() 메서드를 사용했지만...?

변화가 없었다. 🙄

 

결론부터 얘기하면 브라우저 고유 이벤트를 중단하기 위해서는 preventDefault() 메서드를 사용해야 한다.

 

그럼 stopPropagation()은 뭐지?

마침 프로젝트 때 stopPropagation() 메서드를 사용한 예시가 있었다.

 

 

위의 영상에서 보듯이 하나의 상품을 productImgContainer라는 className으로 감쌌는데, 

상품을 클릭할 때와 상품에 hover시 나타나는 장바구니 아이콘을 클릭할 때 모두 상품의 상세 페이지로 이동하는 것을 확인할 수 있다.

 

이는 장바구니 아이콘 또한 productImgContainer 내에 존재하기 때문인데,

이러한 경우에 장바구니 아이콘 클릭 시의 동작을 정의한 함수 내에 stopPropagation() 메서드를 사용함으로써 내가 원하는 기능을 구현할 수 있다.

 

 

보다시피 잘 동작한다. 

 

왜 되지? 🤔

 

왜냐하면 stopPropagation()은 상위 엘리먼트로의 이벤트 전달을 막아주는 메서드이기 때문이다!

 

MDN에서는 stopPropagation() 메서드에 대해

'이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다. ' 라고 설명하고 있다.

 

2021.02.06 - [개발/Javascript] - Event

Event

위의 예를 들어 설명하면,

productImgContainer 내에 존재하는 자식 요소인 장바구니 아이콘에서 click이벤트가 일어날 경우

연결된 콜백 함수 내에서 stopPropagation() 메서드를 사용하여

장바구니 아이콘에서 시작된 click이벤트가 버블링 단계에서 상위 요소인 productImgContainer까지 전달되지 않도록 막은 것이다!

 

결론은,

preventDefault() 메서드는 브라우저의 고유 이벤트를 실행시키고 싶지 않을 때에,

stopPropagation() 메서드는 현재 요소에서의 이벤트 전달을 막고 싶을 때에 사용한다고 정리하면 될 것 같다!