자바스크립트 이벤트 - Element 기본 동작 막기
Javascript 2012. 4. 11. 13:47
엘리먼트의 기본 동작 막기:
몇몇 이벤트들은 해당 엘리먼트가 가지고 있는 기본 동작을 자동으로 실행 시키게 됩니다.
예를 들어 앵커(<a>) 엘리먼트의 click 이벤트는 엘리먼트의 href 속성에 할당된 값을 브라우저에 실행(페이지 이동)시키며, form 엘리먼트의 submit 이벤트는 호출 시 폼을 전송(제출)하기 위한 엘리먼트의 기본 동작을 수행합니다.
또한, 엘리먼트의 기본동작을 막는 방법에는 할당된 이벤트 핸들러의 반환 값을 false로 받는 방법과 아래 예제와 같이 해당 이벤트의 속성 및 메서드를 활용한 방법이 존재합니다.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
<script>
-
-
// 기본 이벤트를 막지 않은 경우
-
function msg(obj, msg, e){
-
-
e = window.event || e;
-
alert(obj.nodeName);
-
-
};
-
-
// 이벤트 핸들러의 반환값을 false 받아 기본 동작을 막는 방법
-
function msg1(obj, msg, e){
-
-
e = window.event || e;
-
alert(obj.nodeName);
-
-
return false;
-
};
-
-
-
// 해당 이벤트의 속성 및 메서드를 활용하여 기본 동작을 막는 방법
-
function msg2(obj, msg, e){
-
-
e = window.event || e;
-
alert(obj.nodeName);
-
-
stopDefault(e);
-
};
-
-
// 엘리먼트의 기본 동작 막기
-
function stopDefault(e)
-
{
-
if (window.event) e.returnValue = false;
-
else if (e.preventDefault) e.preventDefault();
-
};
-
-
</script>
-
-
-
</HEAD>
-
<BODY>
-
<!-- mouseover 이벤트 타입은 click 이벤트 타입과 달리 해당 엘리먼트의 기본동작이 일어나지 않는다. -->
-
<a href="http://naver.com" onmouseover="msg(this, 'test');">mouseover(기본 동작이 일어나지 않는 이벤트 타입에 할당)</a><br /><br />
-
<!-- click 이벤트 타입은 기본 동작이 일어난다. -->
-
<a href="http://naver.com" onclick="msg(this, 'test');">click(기본 동작이 일어난다.)</a><br /><br />
-
<a href="http://naver.com" onclick="return msg1(this, 'test');">click(핸들러의 false 반환값으로 기본동작 막기)</a><br /><br />
-
<a href="http://naver.com" onclick="msg2(this, 'test');">click(이벤트 속성 및 메서드로 기본동작 막기)</a><br />
-
</BODY>
-
</HTML>
