본문 바로가기

Developer

Javascript, JQuery preventDefault의 이해

 

javascript나 jquery 사용 시 부모의 이벤트를 무시하고 싶을 경우.

즉 <a href=” 속성을 무시하고 click 이벤트만 사용하고 싶은 경우.

 

ie 계열의 Browser에서는 event.returnValue = false;

그 외의 Browser에서는 event.preventDefault();

를 이용하여 자기 자신의 기본 이벤트를 취소하는 기능이 있습니다.

 

function test(event){
	try {
		alert('test');
//		if(event.preventDefault)
//			event.preventDefault();
//		else
//			event.returnValue = false;
	}
	catch(e) {
		alert("test ==> " + e.message);
	}
}
<a id="aNate" href="http://nate.net" onclick="test(event);">nate</a>

 

위의 코드를 그대로 적용하게 되면, Nate로 이동하게 됩니다.

주석을 제거하고 테스트 해 보시면 Nate로 이동하지 않고 단지 test라는 메시지박스만 확인 할 수 있습니다.

 

즉. href 의 페이지 이동 이벤트를 무시하게 되는 것입니다.

 

이번에는 JQuery의 예제를 보도록 하겠습니다.

 

$(document).ready(function() {
	$("a#aDaum").click(function(event){
		//event.preventDefault();
		$(this).hide("slow");
	});
});
<a id="aDaum" href="http://daum.net">daum</a>

 

Jquery에서는 IE를 구분하는 코드 필요 없이 무조건 preventDefault() 메소드를 사용하여 처리 할 수 있습니다.

javascript의 기능과 동일합니다.

주석을 제거하면 페이지 이동 없이 사라지는 것이죠..

 

Jquery의 toggle()을 이용하게 되면 여기서는 기본적으로 preventDefault() 속성을 지니고 있습니다.

 

예제를 보겠습니다.

 

$(document).ready(function() {
	$("a#aNaver").toggle(function(){
		$("a#aDaum").hide("slow");
	},
	function(){
		$("a#aDaum").show("slow");
	});
});
<a id="aNaver" href="http://naver.com">naver</a>
<a id="aDaum" href="http://daum.net">daum</a>

 

jquery의 모든 메소드를 확인해 본 것이 아니라 제가 확인한 toggel만 예제로 만들어 보았습니다.

 

참고 URL

http://api.jquery.com/event.preventDefault/

https://developer.mozilla.org/en/DOM/event.preventDefault

http://msdn.microsoft.com/en-us/library/ms534371(v=vs.85).aspx

 

 




감사합니다.