티스토리 뷰
자바스크립트에서 preventDefault, stopPropagation 은 비슷해 보이면서도 다른 목적을 가지고 있는 이벤트 핸들러 함수이다.
이 함수의 큰 목적은
preventDefault : 현재 객체에 있는 모든 실행요소를 멈춘다.
stopPropagation : 상위 노드로 가는 이벤트를 멈춘다.
1. stopPropagation
두개의 이벤트 함수를 이해하기 위해서는 이벤트 버블링을 알아야 한다.
위와 같은 간단한 예제를 보면 클릭을 클릭하면 어떻게 실행이 될까?
1) parent -> child
2) child -> parent
답은 2번이다. 이벤트 버블링은 현재 있는 노드부터 상위(부모)노드로 올라가면서 진행이 된다.
그런데 나는 여기서 클릭을 누르면 child만 띄우고 parent 띄우기 싫을 때가 있을 것이다.
그럴경우에는 stopPropagation 이벤트를 사용하면 된다.
이벤트 함수는 윈도우와 다른 브라우저의 사용방식이 약간 다르다.
2. preventDefault
이 함수는 현재에 있는 속성을 실행하지 않기 위해서 사용하는데 주로 a 태그의 예제가 많다.
<a href="#" onclick="alert(1)">클릭</a>
위의 예제의 실행순서는 onclick -> href 순으로 실행이 된다.
경고창이 먼저 뜨고 href="#" 의해 최상단으로 올라가는 짜증이 있다.
이럴경우 방지하기 위해 사용한다.
또한 onclick="alert(1); return false;" 로도 대체하여 사용이 가능하다.