[Javascript] e.preventDefault(), e.stopPropagation(), 이벤트 버블링(event bubbling)
자바스크립트에서 이벤트 관련 코드를 작성할 시 많이 사용되는 event.preventDefault()와 event.stopPropagation()의 개념과 차이점에 대해 알아보자.
1. event.preventDefault()
a 태그와 submit 기능의 경우, 지니고 있는 고유의 동작이 있다. a 태그의 경우 지정한 페이지로 이동할 수 있으며 submit의 경우 input에 작성된 값을 전송한 뒤 페이지가 새로고침 된다. 이러한 default 동작이 필요하지 않을 때 preventDefault()를 사용하면 된다.
아래에서 확인해보자. 두 번째 링크는 클릭해도 페이지 이동이 동작하지 않음을 알 수 있다.
See the Pen preventDefault by cw (@fromnowwon) on CodePen.
2. event.propagation()
이벤트가 상위 엘리먼트까지 적용되는 경우가 있다. 이러한 동작을 막기 위해서는 event.propagation()을 사용하면 된다. 아래 화면에서 child를 클릭해보자.
See the Pen stopPropagation() by cw (@fromnowwon) on CodePen.
child만 클릭했음에도, 상위 엘리먼트들도 child-parent-container-body 순서대로 같은 동작을 하는 것을 확인할 수 있다. 이처럼 동작이 상위 엘리먼트로 퍼져나가는 현상을 이벤트 버블링(event bubbling)이라고 한다.
아래와 같이 child 엘리먼트에 event.propagation()를 적용하여 이벤트 버블링 현상을 막을 수 있다. parent, container 엘리먼트의 이벤트 버블링 현상도 막고 싶다면 event.propagation()을 적용하면 된다.
See the Pen stopPropagation() by cw (@fromnowwon) on CodePen.