JavaScript 12 Event Object

2,939 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,939
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript 12 Event Object

  1. 1. Event 객체 이벤트와 이벤트 핸들러
  2. 2. Contents 학습 목표 01. 이벤트와 이벤트 핸들러 02. Event 객체
  3. 3. ▶ Event 객체 <ul><li>웹 문서 상에서 발생되는 이벤트에 관한 모든 정보들을 제공 하는 객체입니다 . </li></ul><ul><li>키보드나 마우스등의 클릭이나 움직임 등을 설정할 때 사용되는 객체입니다 . </li></ul><ul><li>예를 들면 이벤트의 종류 , 이벤트의 대상 , 이벤트의 발생위치등의 정보들을 알려줍니다 . </li></ul><ul><li>단 , 익스플로러와 넷스케이프가 서로 다르기 때문에 따로 작성해 주어야 합니다 . </li></ul>
  4. 4. ▶ Event 객체 <ul><li>객체의 정의 </li></ul><ul><li>익스 : window.event. 메소드 ( 속성 ) </li></ul><ul><li>넷스 : 매개변수 . 메소드 ( 속성 ) </li></ul><ul><li>사용형식 </li></ul><ul><li>객체 . 이벤트 = 이벤트처리 함수 </li></ul><ul><li>예 ) document.Onclick = click() </li></ul><ul><li> 문서 안에서 마우스를 클릭하는 행동이 있으면 이벤트 처리 함수을 호출합니다 . </li></ul>
  5. 5. ▶ Event 객체 ( 익스플로러 ) - 속성 속성 기능 x 선택한 객체에 위치해 있는 x 좌표값 y 선택한 객체에 위치해 있는 y 좌표값 screenX 화면전체에서 마우스의 x 좌표값 screenY 화면전체에서 마우스의 x 좌표값
  6. 6. ▶ Event 객체 ( 익스플로러 ) - 속성 <ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>function mouse_event() { </li></ul><ul><li>if(window.event.button == 1) { // 마우스의 왼쪽 버튼을 눌렀을 경우 </li></ul><ul><li>document.write(&quot;x 좌표값 : &quot; + window.event.x + &quot;<br>&quot;) </li></ul><ul><li>document.write(&quot;y 좌표값 : &quot; + window.event.y + &quot;<br>&quot;) </li></ul><ul><li>} </li></ul><ul><li>else if(window.event.button == 2) { // 마우스의 오른쪽 버튼을 눌렀을 경우 </li></ul><ul><li>document.write(&quot;x 좌표값 : &quot; + window.event.screenX + &quot;<br>&quot;) </li></ul><ul><li>document.write(&quot;y 좌표값 : &quot; + window.event.screenY + &quot;<br>&quot;) </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>document.onmousedown = mouse_event // 마우스를 눌렀을시 함수를 호출 </li></ul><ul><li>//--> </li></ul><ul><li></script> </li></ul>
  7. 7. ▶ Event 객체 ( 익스플로러 ) - 속성 <ul><li>window.event. button == 1 </li></ul>1 왼쪽 버튼을 눌렀을 경우 5 왼쪽과 중간 버튼을 같이 눌렀을 경우 2 오른쪽 버튼을 눌렀을 경우 6 중간과 오른쪽 버튼을 같이 눌렀을 경우 3 왼쪽과 오른쪽을 같이 눌렀을 경우 7 마우스 버튼 버튼을 눌렀을 경우 4 마우스 중간 버튼을 눌렀을 경우
  8. 8. ▶ Event 객체 ( 넷스케이프 ) - 속성 속성 기능 pageX 문서내의 X 좌표값 pageY 문서내의 Y 좌표값 screenX 화면 전체에서 x 좌표값 screenY 화면 전체에서 y 좌표값
  9. 9. ▶ Event 객체 ( 넷스케이프 ) - 속성 <ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li>function mouse_event(take) { </li></ul><ul><li>document.write(&quot;x document position : &quot; + take.pageX + &quot;<br>&quot;) </li></ul><ul><li>// 문서내의 x 좌표값 출력 </li></ul><ul><li>document.write(&quot;y document position : &quot; + take.pageY + &quot;<br>&quot;) </li></ul><ul><li>// 문서내의 y 좌표값 출력 </li></ul><ul><li>document.write(&quot;x screen position : &quot; + take.screenX + &quot;<br>&quot;) </li></ul><ul><li>// 화면상의 x 좌표값 출력 </li></ul><ul><li>document.write(&quot;y screen position : &quot; + take.screenY + &quot;<br>&quot;) </li></ul><ul><li>// 화면상의 y 좌표값 출력 </li></ul><ul><li>} </li></ul><ul><li>document.onmousedown = mouse_event // 마우스를 눌렀을시 함수를 호출 </li></ul><ul><li></script> </li></ul>
  10. 10. ▶ 이벤트와 이벤트 핸들러 클릭 이벤트 발생 이벤트 핸들러에 의해 이벤트 처리
  11. 11. ▶ 이벤트와 이벤트 핸들러 종류 이벤트 이벤트 핸들러 발생 blur OnBlur 포커스가 다른곳으로 이동하거나 벗어날때 click OnClick 클릭했을때 focus OnFocus 포커스를 받을때 ( 커서가 생겨나는 순간 ) load OnLoad 브라우저를 이용해서 웹 문서를 읽어올때 mousedown OnMouseDown 사용자가 마우스를 누르는 순간 Mouse ㅡ move OnMouseMove 사용자가 마우스를 움직이는 순간
  12. 12. ▶ 이벤트 핸들러 실행 방법 <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>function sample() </li></ul><ul><li>{ </li></ul><ul><li>document.bgColor=&quot;red&quot; </li></ul><ul><li>} </li></ul><ul><li>// --> </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; VALUE=&quot; 색상변경 &quot; onClick=&quot;sample()&quot;> </li></ul>
  13. 13. ▶ 이벤트 핸들러 실행 방법 <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; VALUE=&quot; 색상변경 &quot; onClick=&quot;document.bgColor='red'&quot;> </li></ul><ul><li></FORM> </li></ul><ul><li></BODY> </li></ul>
  14. 14. ▶ 이벤트 핸들러 실행 방법 <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function sample(color) </li></ul><ul><li>{ </li></ul><ul><li>document.bgColor=color </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; VALUE=&quot; 색상변경 &quot; onClick=&quot;sample('red')&quot;> </li></ul>
  15. 15. ▶ 이벤트 핸들러 실행 방법 <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function sample1() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 방문을 환영해요 .&quot;); </li></ul><ul><li>} </li></ul><ul><li>function sample2() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 다시 또 오세요 !! 안녕 .&quot;); </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY onLoad=&quot;sample1()&quot; onUnload=&quot;sample2()&quot;> </li></ul><ul><li><H1> Event 핸들러 예제 </H1> </li></ul>
  16. 16. ▶ 이벤트 핸들러 (onBlur) <ul><li>원도우나 프레임 , 폼의 요소 , 입력 양식 등에서 벗어날 때 즉 포커스가 다른 곳으로 이동 할때 발생합니다 . </li></ul>
  17. 17. ▶ 이벤트 핸들러 (onBlur) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function addCheck() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 다른 곳으로 포커스를 옮기기전에 다시 한번 이메일을 체크하세요 ..^^&quot;) </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>전자우편 주소 입력 <INPUT TYPE=&quot;text&quot; VALUE=&quot;&quot; NAME=&quot;userEmail&quot; onBlur=addCheck()> </li></ul><ul><li></BODY> </li></ul>
  18. 18. ▶ 이벤트 핸들러 (onFocus) <ul><li>원도우나 프레임 , 폼의 요소 , 입력 양식 등으로 들어올 때 즉 포커스를 받을 때 발생합니다 . </li></ul>
  19. 19. ▶ 이벤트 핸들러 (onFocus) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li><INPUT TYPE=&quot;text&quot; SIZE=&quot;30&quot; onFocus=&quot;document.bgColor='BLUE'&quot;> </li></ul><ul><li></FORM> </li></ul><ul><li></BODY> </li></ul>
  20. 20. ▶ 이벤트 핸들러 (onFocus) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>s1 = myForm.myText.value </li></ul><ul><li>function changeVal() { </li></ul><ul><li>s1 = &quot; 포커스를 받고 있네요 ..^^ 감사해요 &quot; </li></ul><ul><li>document.myForm.myText.value = s1 </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM NAME=myForm> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;myText&quot; size=&quot;30&quot; value=&quot; 저에게 포커스를 주세요 ^^&quot; onFocus = &quot;changeVal()&quot;> </li></ul>
  21. 21. ▶ 이벤트 핸들러 (onFocus+onBlur) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function check(data) </li></ul><ul><li>{ </li></ul><ul><li>if(data.value==&quot;&quot;) </li></ul><ul><li>{ </li></ul><ul><li> alert(&quot; 반드시 상품명을 입력해야 되요 .^^&quot;) </li></ul><ul><li>data.focus() </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY onLoad=&quot;document.shopping.sangpum.focus()&quot;> </li></ul><ul><li><FORM NAME=&quot;shopping&quot;> </li></ul><ul><li>상품명 : <INPUT TYPE=&quot;text&quot; NAME=&quot;sangpum&quot; VALUE=&quot;&quot; onBlur=&quot;check(this)&quot;><BR> </li></ul><ul><li>고객명 : <INPUT TYPE=&quot;text&quot; NAME=&quot;irum&quot;> </li></ul>
  22. 22. ▶ 이벤트 핸들러 (onChange) <ul><li>입력 양식 필드에서 값이 변경되고 포커스를 잃을 때 실행됩니다 . </li></ul><ul><li>예를 들면 텍스트 상자의 내용을 변경하고 마우스로 텍스트 상자 밖의 다른 곳을 클릭하는 경우나 콤보상자에서 다른 데이터를 선택하는 경우 등을 들수 있습니다 . </li></ul>
  23. 23. ▶ 이벤트 핸들러 (onChange) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function sample() { </li></ul><ul><li>alert(&quot; 데이터를 변경했네요 ^^.&quot;) </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM NAME=myForm> </li></ul><ul><li><SELECT NAME=&quot;sel&quot; onChange=&quot;sample()&quot;> </li></ul><ul><li><OPTION VALUE=&quot; 야구 &quot;> 야구 </li></ul><ul><li><OPTION VALUE=&quot; 축구 &quot;> 축구 </li></ul><ul><li></SELECT> </li></ul><ul><li></FORM> </li></ul>
  24. 24. ▶ 이벤트 핸들러 (onClick) <ul><li>폼에 위치한 모든 요소들은 마우스로 클릭했을 때 발생하는 것으로 가장 많이 사용되는 핸들러 중에 하나입니다 . </li></ul>
  25. 25. ▶ 이벤트 핸들러 (onClick) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li><INPUT TYPE=&quot;RESET&quot; VALUE=&quot; 모두 지워요 &quot; onClick=&quot;confirm(' 정말 지우실꺼에요 ?')&quot;> </li></ul><ul><li></FORM> </li></ul><ul><li></BODY> </li></ul>
  26. 26. ▶ 이벤트 핸들러 (onClick) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;javascript&quot;> </li></ul><ul><li>function vars() </li></ul><ul><li>{ </li></ul><ul><li>var num1 = prompt(&quot; 곱할 첫번째 숫자를 입력하세요 &quot;,&quot; 이곳에 입력하세요 &quot;) </li></ul><ul><li>var num2 = prompt(&quot; 곱할 두번째 숫자를 입력하세요 &quot;,&quot; 이곳에 입력하세요 &quot;) </li></ul><ul><li>var num3 = num1*num2 </li></ul><ul><li>alert(&quot; 입력하신 두 숫자의 곱은 = &quot; + num3 + &quot; 입니다 &quot;) </li></ul><ul><li>var contents = &quot; 계산을 더 원하시면 , &quot; + &quot; 숫자 곱하기 단추를 눌러주세요 &quot; </li></ul><ul><li>alert(contents) </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM><INPUT onClick=vars() type=button value=&quot; 입력받은 두개의 숫자 곱하기 &quot;> </li></ul>
  27. 27. ▶ 이벤트 핸들러 (onClick) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function gyesan(number) </li></ul><ul><li>{ </li></ul><ul><li>var result=eval(number.susik.value) </li></ul><ul><li>number.gab.value=result </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM NAME=myForm> </li></ul><ul><li>계산수식 입력 : <INPUT TYPE=&quot;TEXT&quot; NAME=&quot;susik&quot; VALUE=&quot;&quot;><P> </li></ul><ul><li>결 과 값 : <INPUT TYPE=&quot;TEXT&quot; NAME=&quot;gab&quot; SIZE=20 VALUE=&quot;&quot;><P> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; VALUE=&quot; 계산하기 &quot; onClick=&quot;gyesan(this.form)&quot;><P> </li></ul>
  28. 28. ▶ 이벤트 핸들러 (onDbClick) <ul><li>마우스를 이용하여 폼의 요소를 더블클릭했을 때 발생합니다 . </li></ul>
  29. 29. ▶ 이벤트 핸들러 (onDbClick) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><body onDblClick = &quot;document.write('Hello World!')&quot;> </li></ul><ul><li></BODY> </li></ul>
  30. 30. ▶ 이벤트 핸들러 (onKeyDown) <ul><li>사용자가 키를 누르는 순간 발생합니다 . </li></ul>
  31. 31. ▶ 이벤트 핸들러 (onKeyDown) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function changeVal() </li></ul><ul><li>{ </li></ul><ul><li>s1 = &quot; 키 누르셨죠 ? &quot; </li></ul><ul><li>myForm.myText.value = s1 </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY onKeyDown = &quot;changeVal()&quot;> </li></ul><ul><li><FORM NAME=&quot;myForm&quot; > </li></ul><ul><li><INPUT TYPE=&quot;text&quot; NAME=&quot;myText&quot; > </li></ul><ul><li></FORM> </li></ul><ul><li></BODY> </li></ul>
  32. 32. ▶ 이벤트 핸들러 (onKeyUP) <ul><li>누른 키를 놓을 때 발생합니다 . </li></ul>
  33. 33. ▶ 이벤트 핸들러 (onKeyUP) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function changeVal() </li></ul><ul><li>{ </li></ul><ul><li>s1 = &quot; 누른 키에서 손을 뗐죠 ? &quot; </li></ul><ul><li>myForm.myText.value = s1 </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY onKeyUp = &quot;changeVal()&quot;> </li></ul><ul><li><FORM NAME=&quot;myForm&quot; > </li></ul><ul><li><INPUT TYPE=&quot;text&quot; NAME=&quot;myText&quot; > </li></ul><ul><li></FORM> </li></ul><ul><li></BODY> </li></ul>
  34. 34. ▶ 이벤트 핸들러 (onLoad) <ul><li>브라우저에서 문서를 읽어 올떄 발생하는 핸들러로써 문서의 로딩 완료 시점과 이미지의 로딩 완료 시점에서 발생합니다 . </li></ul><ul><li>예 ) </li></ul><ul><li><body Onload= “ “> </li></ul><ul><li><Framset Onload= “ “> </li></ul><ul><li><img Onload= “ “> </li></ul>
  35. 35. ▶ 이벤트 핸들러 (onLoad) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY onLoad = &quot;alert(' 문서의 로드와 함께 실행되는 창이에요 ^^')&quot;> </li></ul><ul><li></BODY> </li></ul>
  36. 36. ▶ 이벤트 핸들러 (onMouseOver) <ul><li>마우스 포인트가 이미지나 링크의 위치 할때 발생합니다 . </li></ul>
  37. 37. ▶ 이벤트 핸들러 (onMouseOver) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function changeImage() </li></ul><ul><li>{ </li></ul><ul><li>document.myImage.src=&quot;home2.gif&quot; </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><IMG name=&quot;myImage&quot; SRC=&quot;home1.gif&quot; onMouseOver=&quot;changeImage()&quot;> </li></ul><ul><li></BODY> </li></ul>
  38. 38. ▶ 이벤트 핸들러 (onMouseOver) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><A HREF=&quot;http://www.empas.com&quot; onMouseOver=&quot;document.bgColor='pink', onMouseOver=window.status=' 엠파스닷컴 사이트로 이동합니다 .'&quot;> 여기에 마우스를 올려 보세요 !</A> </li></ul><ul><li></BODY> </li></ul>
  39. 39. ▶ 이벤트 핸들러 (onMouseOut) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function change() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 버튼위에서 벗어났네요 ?&quot;) </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; VALUE=&quot; 눌러보세요 &quot; onMouseOut=&quot;change()&quot;> </li></ul><ul><li></BODY> </li></ul>
  40. 40. ▶ 이벤트 핸들러 (onMouseOut+Over) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><A HREF=&quot;http://www.samyangm.com&quot; </li></ul><ul><li>onMouseOver = &quot;document.pic1.src='home2.gif'&quot; </li></ul><ul><li>onMouseOut = &quot;document.pic1.src='home1.gif'&quot;> </li></ul><ul><li><IMG SRC=&quot;home1.gif&quot; BORDER=0 NAME=&quot;pic1&quot;> </A> </li></ul><ul><li></BODY> </li></ul>
  41. 41. ▶ 이벤트 핸들러 (onMouseDown) <ul><li>마우스를 클릭 했을때 ( 마우스를 누르는 순간 ) 발생하는 이벤트 핸들러 </li></ul>
  42. 42. ▶ 이벤트 핸들러 (onMouseDown) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function changeColor(a) </li></ul><ul><li>{ </li></ul><ul><li>document.bgColor=a </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><P> 바탕색을 금색으로 바꾸고 싶나요 ? 그렇다면 , </li></ul><ul><li><B><A onMouseDown=&quot;changeColor('gold')&quot;> [ 이 부분 ] </A></B> 을 꾸 ~~~~~~ 욱 눌러주세요 ^^.</P> </li></ul><ul><li><P> 바탕색을 은색으로 바꾸고 싶나요 ? 그렇다면 , </li></ul><ul><li><B><A onMouseDown=&quot;changeColor('silver')&quot;> [ 이 부분 ] </A></B> 을 꾸 ~~~~~~ 욱 눌러주세요 ^^.</P> </li></ul><ul><li><P> 바탕색을 동색으로 바꾸고 싶나요 ? 그렇다면 , </li></ul><ul><li><B><A onMouseDown=&quot;changeColor('bronze')&quot;> [ 이 부분 ] </A></B> 을 꾸 ~~~~~~ 욱 눌러주세요 ^^.</P> </li></ul>
  43. 43. ▶ 이벤트 핸들러 (onMouseUp) <ul><li>마우스 버튼을 눌렀다 놓을때 발생하는 이벤트 핸들러 . </li></ul>
  44. 44. ▶ 이벤트 핸들러 (onMouseUp) <ul><li><head> </li></ul><ul><li><script language=“javascript&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>function eventonmouseup() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 마우스 클릭 &quot;) </li></ul><ul><li>} </li></ul><ul><li>--> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body onMouseUp=&quot;eventonmouseup()&quot;> </li></ul><ul><li>마우스를 천천히 눌렀다 놓아 보세요 !! </li></ul><ul><li></body> </li></ul>
  45. 45. ▶ 이벤트 핸들러 (onReset) <ul><li>Reset 버튼을 눌렀을때 발생하는 이벤트 핸들러 .  </li></ul>
  46. 46. ▶ 이벤트 핸들러 (onReset) <ul><li><head> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>function eventonreset() { </li></ul><ul><li>alert(&quot; 리셋 되었습니다 .&quot;); </li></ul><ul><li>onrs.Rangs.focus(); </li></ul><ul><li>} </li></ul><ul><li>--> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><form onReset=&quot;eventonreset()&quot; name=&quot;onrs&quot;> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;Rangs&quot;> </li></ul><ul><li><input type=&quot;reset&quot; value=&quot; 리 셋 버 튼 &quot;> </li></ul><ul><li></form> </li></ul>
  47. 47. ▶ 이벤트 핸들러 (onSubmit) <ul><li>Submit 버튼을 눌렀을때 발생하는 이벤트 핸들러 .  </li></ul>
  48. 48. ▶ 이벤트 핸들러 (onSubmit) <ul><li><HEAD> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM NAME=&quot;form1&quot; onSubmit=&quot;alert(' 입력한 내용을 모두 전송하시려구요 ?')&quot;> </li></ul><ul><li>전자우편 주소 :<INPUT TYPE=&quot;text&quot; NAME=&quot;mail&quot; VALUE=&quot;&quot; SIZE=&quot;25&quot;> </li></ul><ul><li><INPUT TYPE=&quot;submit&quot; VALUE=&quot; 내용 보내기 &quot; NAME=&quot;submit1&quot;> </li></ul><ul><li></FORM> </li></ul><ul><li></BODY> </li></ul>
  49. 49. ▶ 이벤트 핸들러 (onSelect) <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function sample() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 저를 선택하려 했군요 ?^^&quot;) </li></ul><ul><li>} </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><FORM> </li></ul><ul><li>전자우편 주소 :<INPUT TYPE=&quot;text&quot; VALUE=&quot; 저를 마우스로 블록화시켜 보세요 &quot; SIZE=&quot;40&quot; onSelect=&quot;sample()&quot;> </li></ul>
  50. 50. <ul><li><HEAD> </li></ul><ul><li><SCRIPT LANGUAGE=&quot;JavaScript&quot;> </li></ul><ul><li>function click(e) </li></ul><ul><li>{ </li></ul><ul><li>return document.myForm.button1.handleEvent(e); </li></ul><ul><li>} </li></ul><ul><li>function button1Click() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 버튼 1 에서 발생한 이벤트 &quot;); </li></ul><ul><li>} </li></ul><ul><li>function button2Click() </li></ul><ul><li>{ </li></ul><ul><li>alert(&quot; 버튼 2 에서 발생한 이벤트 &quot;); </li></ul><ul><li>} </li></ul><ul><li>document.captureEvents(Event.CLICK); </li></ul><ul><li>document.onClick = click; </li></ul><ul><li></SCRIPT> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><H1> Event 잡기 예제 </H1> </li></ul><ul><li><FORM NAME=&quot;myForm&quot;> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; NAME=&quot;button1&quot; VALUE=&quot; 버튼 1&quot; onClick=&quot;button1Click()&quot;> </li></ul><ul><li><INPUT TYPE=&quot;button&quot; NAME=&quot;button2&quot; VALUE=&quot; 버튼 2&quot; onClick=&quot;button2Click()&quot;> </li></ul>

×