이벤트 다루기

Event handler 에서 Return 쓰기

Event handler에서 return문은
1. return true;
2. return false;
3. No (지정 안됨)
으로 사용할 수 있습니다..

1. return true는 이벤트 핸들러를 실행한 Object가 그 자신의 일을 정상적으로 수행합니다.
2. return false는 자신의 일을 수행하지 못하게 합니다.
3. No (지정 안됨) return 이 없으면 1. 과 같습니다. Default로 TRUE입니다.
IE3 에서는 이벤트에서 "return false"를 지원하지 않습니다..

예1.

아래는 Link onClick이벤트 핸들러가 "return false"가 지정된 link tag입니다.
onClick="return false" 를 지정했기 때문에 click 된 Object가 수행되지 않습니다. 즉, event handler가 object의 고유 작업을 취소한 것입니다. Link의 고유 작업은 연결된 문서로 이동하는 것입니다.

아래의 두개의 링크를 눌러 보세요.

<A HREF="Javascript:alert('Return FALSE')" onClick="return false">Click me</a>

<A HREF="Javascript:alert('Return TRUE')" onClick="return true">Click me</a>

Form의 onClick, onSubmit 이벤트의 Return문의 사용

<SCRIPT LANGUAGE="JavaScript"> function functionName() { alert("onSubmit"); return onsubmitFlag // (1) onSubmit 이벤트 리턴값. } function submitOnclick() { alert("onClick"); return submitFlag // (2) submit 버튼의 onclick 리턴값. } var submitFlag; var onsubmitFlag; </SCRIPT> </head> <body> <form action="mailto:" NAME="formName" onSubmit="return functionName()"> <input type="SUBMIT" VALUE="메일창 띄우기" onClick="return functionName()"> </form> <a href="#" onClick="submitFlag=true">submit 버튼 onClick 이벤트 true로..</a> <br><a href="#" onClick="onsubmitFlag=true">폼의 onSubmit를 true로..</a> fome과 input의 object 계층은 window -----document-----form----input입니다.

그리고 window, document, form, input(submit)등은 하나의 Object입니다. 그러므로, 각 Object의 이벤트 핸들러는 자신의 Object에 의해 호출되고 return으로 Object의 실행 여부를 결정할 수 있습니다.

그리고 특히 기억해야 할 것은 onClick="return functionName()" 입니다. 함수(위의 functionName)의 리턴값은 "이벤트핸들러 = return 함수"에 영향을 미칩니다. return을 빼고 "이벤트핸들러 = 함수"는 함수의 return 값에(위의 (1)) 상관없이 실행이 됩니다.

위의 (1)을 return false로 바꾸면 메일 창은 나오지 않습니다. 왜냐하면, Submit Object의 onClick event는 상위 Object인 Form의 onSubmit 이벤트를 호출하는데, return false로 실행이 정지 되었기 때문입니다.

Event handler 에서 Return 쓰기
폼의 onFocus, onBlur
Event handler 다루기
Event 기타
예제1
JavaScript1.2 Event

TOP