• Like
JavaScript 12 Event Object
Upcoming SlideShare
Loading in...5
×

JavaScript 12 Event Object

  • 2,421 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,421
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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