이벤트 예제 go to UP


<html> <head> <script> function onSubmit() { alert("onSubmit = "+submitFlag); return submitFlag // (1) onSubmit 이벤트 리턴값. } function onClick() { alert("onClick = "+clickFlag); return clickFlag // (2) submit 버튼의 onclick 리턴값. } submitFlag = false; clickFlag = false; //--></SCRIPT> </head> <body> <FORM action="mailto:" NAME="formName" onSubmit="return onSubmit()"> <INPUT TYPE="SUBMIT" VALUE="메일창 띄우기" onClick="return onClick()"> </FORM> <a href="#" onClick="clickFlag=true">버튼 onClick 이벤트 true로..</a><br> <a href="#" onClick="submitFlag=true">폼 onSubmit를 true로..</a> </body> </html>
SUBMIT 버튼 onClick 이벤트 true로..
폼 onSubmit를 true로..

링크를 하나씩 누르고 버튼을 눌러 보세요..
링크 둘 다 누르고 버튼을 누르면 메일 창이 뜹니다.

처음 submit 버튼 "메일창 띄우기"를 누르면 submit 버튼의 onClick 이벤트가 false로 지정되어 있어 onSubmit 이벤트가 나오지 않습니다. "버튼 onClick 이벤트 true로.."를 누르면 버튼의 onClick 이벤트를 true로 지정합니다. 이제 폼의 submit 이벤트가 호출됩니다. 하지만, onSubmit 이벤트 헨들러가 false로 지정되어 있어 ACTION:에 지정되어 있는 mailto: 메일 창은 나오지 않습니다. "폼 onSubmit를 true로.."를 누르면 이제 onSubmit 이벤트 헨들러의 return 값을 true로 설정합니다. 버튼을 누르면 메일창이 뜹니다.

즉, 폼의 submit가 수행되어 작업을 완료할 때는 두개의 이벤트, 버튼의 click, 폼의 submit가 사용됩니다. 그러므로, 두 이벤트의 반환값은 true이여야 폼이 submit 됩니다.

SUBMIT 버튼과 form의 submit은 다릅니다. submit와 form은 각각의 Object입니다. 반면에 일반 버튼(type=button)도 하나의 Object이지만, 지정되어 있는 고유의 작업이 없습니다. 그러므로, 일반 버튼에서 return의 값은 상관이 없습니다. RETURN 값은 Object의 고유의 지정되어 있는 행동에 영향을 미칩니다.

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


TOP