두 코드 모두 이벤트 관련 동작에서 많이 사용되는 코드 입니다.
개념없이 아무렇게나 쓰다보니 두 메서드의 차이점에 대해 궁금해졌습니다!
event.preventDefalut()
어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정합니다.
예로<a> <submit> <button>태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 동작을 실행합니다. 해당 메서드를 통해 이벤트 발생을 막을 수 있습니다.
a태그에 preventDefault 메서드를 추가해줬습니다.
href 속성이 중단되고, 이동하기 버튼을 눌러도 페이지 이동 이벤트가 동작하지 않습니다.
event.stopPropagation()
전파를 중지한다는 이름 뜻으로 event 객체의 버블링을 막기 위한 메서드 입니다.
event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다.
이벤트는 이벤트 캡쳐링과 이벤트 버블링으로 나뉘는데 클릭이 발생항 경우를 예로 들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상입니다.
상위 엘리먼트에서 발생한 이벤트가 하위 엘리먼트에서 발생한 이벤트 결과에 의도치 않은 결과를 주는 경우 자주 사용합니다.
위 예제에서 innerDiv 클릭시 alertInnerDiv() > alertOuterDiv() 순서로 전파되어 2번의 이벤트가 발생해야 하지만 alertInnerDiv()의 e.stopPropagation()이 부모 엘리먼트로의 이벤트 전파를 막아 alert이 한번만 실행되는 것을 확인할 수 있습니다.
정리
하위 태그 안에 이벤트 발생의 전파가 되는가와 기본 클릭 동작 여부 차이로 구분할 수 있습니다.
사실상 return의 대체 역할이라 할 수 있습니다.e.preventDefault는 고유 동작을 중단시킵니다.
e.stopPropagation은 상위 엘리먼트들로의 이벤트 전파를 중단시킵니다.
