preventDefault vs. stoppropagation

UX 구현을 하면서 event의 핸들링에 preventDefault와 stopPropagation 함수를 많이 사용했었는데 정확하게 어떤 상황에서 사용해야 하는지 정리해본다.

Javascript Event 객체의 Instance Method

---

event.preventDefault

브라우저의 기본 동작을 중단시키는 메소드

1. <a> 태그를 클릭했을 때 브라우저가 새로운 페이지를 로드하려는 기본 동작을 방지할 수 있다.
2. 폼을 제출할 때 사용자가 입력한 내용을 서버로 전송하기 전에 데이터를 유효성 검사할 수 있다.
3. 특정 키 입력에 대한 기본 동작을 방지하고 사용자가 원하는 동작을 수행하도록 할 때 사용할 수 있다.

event.stopPropagation

이벤트의 버블링이나 캡처링을 중단시키는 메소드

1. 한 요소 안에 다른 요소가 중첩되어 있을 때 내부 요소의 이벤트가 바깥쪽 요소로 전파되는 것을 방지할 수 있다.
2. 리스트 아이템 내부의 버튼을 클릭할 때 리스트 전체에 연결된 클릭 이벤트를 방지하고 싶을 때 사용할 수 있다.
3. 여러 개의 중첩된 이벤트 핸들러가 각자의 동작을 수행하고 전파를 중단하고 싶을 때 사용할 수 있다.