• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript 12 Event Object
 

JavaScript 12 Event Object

on

  • 2,901 views

 

Statistics

Views

Total Views
2,901
Views on SlideShare
2,900
Embed Views
1

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript 12 Event Object JavaScript 12 Event Object Presentation Transcript

    • Event 객체 이벤트와 이벤트 핸들러
    • Contents 학습 목표 01. 이벤트와 이벤트 핸들러 02. Event 객체
    • ▶ Event 객체
      • 웹 문서 상에서 발생되는 이벤트에 관한 모든 정보들을 제공 하는 객체입니다 .
      • 키보드나 마우스등의 클릭이나 움직임 등을 설정할 때 사용되는 객체입니다 .
      • 예를 들면 이벤트의 종류 , 이벤트의 대상 , 이벤트의 발생위치등의 정보들을 알려줍니다 .
      • 단 , 익스플로러와 넷스케이프가 서로 다르기 때문에 따로 작성해 주어야 합니다 .
    • ▶ Event 객체
      • 객체의 정의
      • 익스 : window.event. 메소드 ( 속성 )
      • 넷스 : 매개변수 . 메소드 ( 속성 )
      • 사용형식
      • 객체 . 이벤트 = 이벤트처리 함수
      • 예 ) document.Onclick = click()
      •  문서 안에서 마우스를 클릭하는 행동이 있으면 이벤트 처리 함수을 호출합니다 .
    • ▶ Event 객체 ( 익스플로러 ) - 속성 속성 기능 x 선택한 객체에 위치해 있는 x 좌표값 y 선택한 객체에 위치해 있는 y 좌표값 screenX 화면전체에서 마우스의 x 좌표값 screenY 화면전체에서 마우스의 x 좌표값
    • ▶ 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>
    • ▶ Event 객체 ( 익스플로러 ) - 속성
      • window.event. button == 1
      1 왼쪽 버튼을 눌렀을 경우 5 왼쪽과 중간 버튼을 같이 눌렀을 경우 2 오른쪽 버튼을 눌렀을 경우 6 중간과 오른쪽 버튼을 같이 눌렀을 경우 3 왼쪽과 오른쪽을 같이 눌렀을 경우 7 마우스 버튼 버튼을 눌렀을 경우 4 마우스 중간 버튼을 눌렀을 경우
    • ▶ Event 객체 ( 넷스케이프 ) - 속성 속성 기능 pageX 문서내의 X 좌표값 pageY 문서내의 Y 좌표값 screenX 화면 전체에서 x 좌표값 screenY 화면 전체에서 y 좌표값
    • ▶ 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>
    • ▶ 이벤트와 이벤트 핸들러 클릭 이벤트 발생 이벤트 핸들러에 의해 이벤트 처리
    • ▶ 이벤트와 이벤트 핸들러 종류 이벤트 이벤트 핸들러 발생 blur OnBlur 포커스가 다른곳으로 이동하거나 벗어날때 click OnClick 클릭했을때 focus OnFocus 포커스를 받을때 ( 커서가 생겨나는 순간 ) load OnLoad 브라우저를 이용해서 웹 문서를 읽어올때 mousedown OnMouseDown 사용자가 마우스를 누르는 순간 Mouse ㅡ move OnMouseMove 사용자가 마우스를 움직이는 순간
    • ▶ 이벤트 핸들러 실행 방법
      • <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;>
    • ▶ 이벤트 핸들러 실행 방법
      • <HEAD>
      • </HEAD>
      • <BODY>
      • <FORM>
      • <INPUT TYPE=&quot;button&quot; VALUE=&quot; 색상변경 &quot; onClick=&quot;document.bgColor='red'&quot;>
      • </FORM>
      • </BODY>
    • ▶ 이벤트 핸들러 실행 방법
      • <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;>
    • ▶ 이벤트 핸들러 실행 방법
      • <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>
    • ▶ 이벤트 핸들러 (onBlur)
      • 원도우나 프레임 , 폼의 요소 , 입력 양식 등에서 벗어날 때 즉 포커스가 다른 곳으로 이동 할때 발생합니다 .
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onFocus)
      • 원도우나 프레임 , 폼의 요소 , 입력 양식 등으로 들어올 때 즉 포커스를 받을 때 발생합니다 .
    • ▶ 이벤트 핸들러 (onFocus)
      • <HEAD>
      • </HEAD>
      • <BODY>
      • <FORM>
      • <INPUT TYPE=&quot;text&quot; SIZE=&quot;30&quot; onFocus=&quot;document.bgColor='BLUE'&quot;>
      • </FORM>
      • </BODY>
    • ▶ 이벤트 핸들러 (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;>
    • ▶ 이벤트 핸들러 (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;>
    • ▶ 이벤트 핸들러 (onChange)
      • 입력 양식 필드에서 값이 변경되고 포커스를 잃을 때 실행됩니다 .
      • 예를 들면 텍스트 상자의 내용을 변경하고 마우스로 텍스트 상자 밖의 다른 곳을 클릭하는 경우나 콤보상자에서 다른 데이터를 선택하는 경우 등을 들수 있습니다 .
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onClick)
      • 폼에 위치한 모든 요소들은 마우스로 클릭했을 때 발생하는 것으로 가장 많이 사용되는 핸들러 중에 하나입니다 .
    • ▶ 이벤트 핸들러 (onClick)
      • <HEAD>
      • </HEAD>
      • <BODY>
      • <FORM>
      • <INPUT TYPE=&quot;RESET&quot; VALUE=&quot; 모두 지워요 &quot; onClick=&quot;confirm(' 정말 지우실꺼에요 ?')&quot;>
      • </FORM>
      • </BODY>
    • ▶ 이벤트 핸들러 (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;>
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onDbClick)
      • 마우스를 이용하여 폼의 요소를 더블클릭했을 때 발생합니다 .
    • ▶ 이벤트 핸들러 (onDbClick)
      • <HEAD>
      • </HEAD>
      • <body onDblClick = &quot;document.write('Hello World!')&quot;>
      • </BODY>
    • ▶ 이벤트 핸들러 (onKeyDown)
      • 사용자가 키를 누르는 순간 발생합니다 .
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onKeyUP)
      • 누른 키를 놓을 때 발생합니다 .
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onLoad)
      • 브라우저에서 문서를 읽어 올떄 발생하는 핸들러로써 문서의 로딩 완료 시점과 이미지의 로딩 완료 시점에서 발생합니다 .
      • 예 )
      • <body Onload= “ “>
      • <Framset Onload= “ “>
      • <img Onload= “ “>
    • ▶ 이벤트 핸들러 (onLoad)
      • <HEAD>
      • </HEAD>
      • <BODY onLoad = &quot;alert(' 문서의 로드와 함께 실행되는 창이에요 ^^')&quot;>
      • </BODY>
    • ▶ 이벤트 핸들러 (onMouseOver)
      • 마우스 포인트가 이미지나 링크의 위치 할때 발생합니다 .
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onMouseOver)
      • <HEAD>
      • </HEAD>
      • <BODY>
      • <A HREF=&quot;http://www.empas.com&quot; onMouseOver=&quot;document.bgColor='pink', onMouseOver=window.status=' 엠파스닷컴 사이트로 이동합니다 .'&quot;> 여기에 마우스를 올려 보세요 !</A>
      • </BODY>
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onMouseDown)
      • 마우스를 클릭 했을때 ( 마우스를 누르는 순간 ) 발생하는 이벤트 핸들러
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onMouseUp)
      • 마우스 버튼을 눌렀다 놓을때 발생하는 이벤트 핸들러 .
    • ▶ 이벤트 핸들러 (onMouseUp)
      • <head>
      • <script language=“javascript&quot;>
      • <!--
      • function eventonmouseup()
      • {
      • alert(&quot; 마우스 클릭 &quot;)
      • }
      • -->
      • </script>
      • </head>
      • <body onMouseUp=&quot;eventonmouseup()&quot;>
      • 마우스를 천천히 눌렀다 놓아 보세요 !!
      • </body>
    • ▶ 이벤트 핸들러 (onReset)
      • Reset 버튼을 눌렀을때 발생하는 이벤트 핸들러 . 
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (onSubmit)
      • Submit 버튼을 눌렀을때 발생하는 이벤트 핸들러 . 
    • ▶ 이벤트 핸들러 (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>
    • ▶ 이벤트 핸들러 (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;>
      • <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;>