본문 바로가기

프로그램

stopPropagation() 과 preventDefault() 의 차이.


javascript 에서는, 이벤트를 막기 위해서는 stopPropagation() 과 preventDefault() 를 쓴다.

이전에는 이 이벤트들의 차이를 멋도 모르고 그냥 썼는데, 최근에 우연히 이 둘의 차이를 확실하게 알게 되어 적어 놓는다.

이 둘의 차이는, 사용자가 발생한 이벤트를 막느냐, 기본 이벤트를 막느냐의 차이다.

예를 들어, 이런 코드를 보자.


<a href="http://www.daum.net">
<div id="div1">
<img src="./image/logo.jpg" id="img1"></img>
</div>
</a>

<script>
document.getElementById('div1').onclick = function(){ alert( 'click div1' ); };
document.getElementById('img1').onclick = function(){ alert( 'click img1' ); };
</script>


사용자가 여기서, 이미지를 클릭한다면 어찌 될까?

아마도 "click img1" 이 alert 로 뜨고, 다음 "click div1" 이 뜨고, 그 다음 www.daum.net 으로 넘어갈 거다.

만일 onclick 함수에서 stopPropargation() 을 쓰면, 사용자의 액션에 의한 이벤트 전파가 막아지므로, "click div1" 의 alert 이 뜨는 걸 막을 수는 있다.
하지만, http://www.daum.net 으로 이동하는 걸 막지는 못한다.

만일 onclick 함수에서 proventDefault() 를 쓰면, 브라우저의 기본 이벤트가 무효화 되므로, Ancher 태그의 hlink 가 작동하지 않는다. 즉 http://www.daum.net 으로 이동하지 않는다.
하지만, 사용자 클릭 이벤트 전파는 막지 않으므로, alert() 2번. 'click img1" 과 'click div1"이 둘 다 뜬다.

몰론, stopPropagation() 과 preventDefault() 를 둘 다 쓰면, 둘 다 막겠지.

이상. 끝.



 


'프로그램' 카테고리의 다른 글

FACEBOOK API 작성기  (7) 2012.10.22
파일 확장자 종류.  (0) 2012.09.13
stopPropagation() 과 preventDefault() 의 차이.  (4) 2012.08.24
java 의 List , Arraylist 의 차이점.  (0) 2012.06.16
php 에서 & 와 @ 의 뜻.  (0) 2012.05.24
워드프레스  (0) 2012.05.21