[ 자바스크립트(JavaScript) ] e.preventDefault()와 e.stopPropagation()을 알아보자.

📍 e.preventDefault()와 e.stopPropagation()을 알아보자.

e.preventDefault()와 e.stopPropagation()은 자바스크립트의 이벤트 핸들러라는 공통점이 있지만, 차이점도 있다.

 

e.preventDefault()는 이벤트의 기본 동작이 발생하지 않도록 하기 위해 이벤트 객체에서 호출하는 method이다. DOM요소는 저마다 기본 동작이 있다. 예를 들어 anchor 태그를 클릭하면 href에 지정된 링크로 이동하고, <input type="checkbox" />를 클릭하면 체크모양이 생기거나 없어진다. 그리고 form 태그에서 submit을 하게되면 refresh가 일어난다. 이럴 때 e.preventDefault()를 사용하면 지정된 링크로 이동하거나 체크모양을 생기거나 없애는 동작 그리고 refresh하는 동작을 방지할 수 있다. 즉, 해당 태그의 고유한 이벤트 동작을 방지할 수 있다.

 

아래 예제에서 input창을 채우고 submit을 눌러보자. e.preventDefault()가 있으면 새로고침이 안될 것이고, e.preventDefault()가 없으면 새로고침이 될 것이다.(만약, input창이 정상적으로 동작하지 않는다면 크롬이 아닌 타 브라우저(Safari, Firefox, Edge...)로 접속하자. 그리고 codePen embed에 console 탭이 보이지 않으면 여기에서 확인하자.)

 

See the e.preventDefault by @YWTechIT on CodePen.

 

e.stopPropagation()는 DOM tree를 통해 전파(구체적으로 캡쳐링/버블링 단계)되는 이벤트를 중지하기 위해 이벤트 객체에서 호출하는 method이다. 예를 들어 부모를 갖고 있는 자식 element에서 이벤트가 발생하게 되면 부모 element도 자식 이벤트가 전파되는데, e.stopPropagation()를 사용함으로써 자신에게 바인딩된 이벤트 핸들러만 실행하도록 하고, 부모 element에게 이벤트가 전파되는 것을 방지할 수 있다. 추가로 링크나 버튼클릭 시 e.stopPropagation()를 사용해도 이벤트의 기본 동작은 실행되는 경우가 있는데, 이때는 e.preventDefault()를 함께 써줘야한다.

728x90

아래 예제에서 Click me!버튼을 눌렀을 때의 console창과 e.stopPropagation()를 주석처리하고 Click me!버튼을 눌렀을 때의 console창을 비교해 보자. (console창이 보이지 않으면 여기에서 확인할 수 있다.)

 

See the e.stopPropagation by @YWTechIT on CodePen.

 

여담으로 e.stopImmediatePropagation()메소드는 동일한 이벤트 유형에 대해 여러 개의 리스너가 동일한 element에 연결된 경우에 사용하면 이벤트 Propagation을 방지할 수 있다. React에서 사용하려면 브라우저의 고유 이벤트인 nativeEvent 어트리뷰트에서 사용해야한다. (e.nativeEvent.stopImmediatePropagation())

 

Reference

1. Event.preventDefault - MDN
2. Event.stopPropagation - MDN
3. Event.stopImmediatePropagation - MDN
4. 합성이벤트 - React