들어가며

Event 인터페이스 기반의 여러 이벤트 객체들이 존재한다. (click, focus, drag and drop 등..) 사용자의 action 혹은 기타 조건 하에 발생한 이벤트들은 DOM 상에서 각각의 방식으로 전달 혹은 통제되는데, 이를 위해 내장 함수들을 활용할 수 있다. 여기서 설명할 event.preventDefault 와 event.stopPropagation 은 그 중 많이 사용되는 함수이다.

event.preventDefault

이 함수는 목적 이벤트 액션 외의 다른 이벤트 액션들을 막기 위해 사용된다. 예를 들어, a 태그에 onclick 이벤트를 추가한 경우 a 태그 고유의 페이지 이동 액션을 통제하고자 한다면 event.preventDefault 함수를 사용한다.

위 코드에서 a 태그 클릭 시(onclick 시) myFunction() 함수가 호출되며, 첫 줄의 event.preventDefault(); 라인으로 인해 a 태그 고유의 페이지 이동 이벤트가 실행되지 않게 된다. 즉, console.log(‘클릭됨!’); 만 실행된다는 이야기이다.

event.stopPropagation

html DOM 에서는 여러 엘리먼트들이 중첩되며 부모 자식 관계를 이루는 경우가 많다.

div > ul > li > a > ...

이 때, 각각의 엘리먼트들이 여러 이벤트들을 가지고 있을 수 있는데, 원하는 엘리먼트의 이벤트 동작시 event.stopPropagation() 함수가 호출되면, 자기 자신 외의 이벤트들은 실행되지 않게 된다. 정확히는 부모로의 이벤트의 전파를 막는 것인데, a 태그를 클릭하면 li, ul, div 로의 전파가 이루어지지 않는다.

원래는 a 태그를 클릭할 때 그것을 감싸고 있는 li, ul, div 태그로 이벤트가 확산되며 각각의 onclick 지정함수가 순차적으로 호출되지만, myFunction() 의 event.stopPropagation(); 으로 인해 이벤트 확산이 막히게 된다.

Written on June 8th, 2020 by namu