JavaScript 12 Event Object

JavaScript Object

Event 객체이벤트와 이벤트 핸들러

Contents

학습목표

01.01.

이벤트와 이벤트 핸들러이벤트와 이벤트 핸들러02.02.

Event 객체Event 객체

▶ Event 객체

• 웹 문서 상에서 발생되는 이벤트에 관한 모든 정보들을 제공하는 객체입니다 .• 키보드나 마우스등의 클릭이나 움직임등을 설정할 때 사용되는 객체입니다 .• 예를 들면 이벤트의 종류 , 이벤트의 대상 , 이벤트의 발생위치등의 정보들을

알려줍니다 .• 단 , 익스플로러와 넷스케이프가 서로 다르기 때문에 따로 작성해 주어야 합니다 .

▶ Event 객체

• 객체의 정의• 익스 : window.event. 메소드 ( 속성 )• 넷스 : 매개변수 . 메소드 ( 속성 )• 사용형식• 객체 . 이벤트 = 이벤트처리 함수• 예 ) document.Onclick = click() 문서 안에서 마우스를 클릭하는 행동이 있으면 이벤트 처리 함수을 호출합니다 .

▶ Event 객체 ( 익스플로러 ) - 속성

속성 기능

x 선택한 객체에 위치해 있는 x 좌표값

y 선택한 객체에 위치해 있는 y 좌표값

screenX 화면전체에서 마우스의 x 좌표값

screenY 화면전체에서 마우스의 x 좌표값


• window.event.button == 1

1 왼쪽 버튼을 눌렀을 경우 5 왼쪽과 중간 버튼을 같이 눌렀을 경우

2 오른쪽 버튼을 눌렀을 경우 6 중간과 오른쪽 버튼을 같이 눌렀을 경우

3 왼쪽과 오른쪽을 같이 눌렀을 경우 7 마우스 버튼 버튼을 눌렀을 경우

4 마우스 중간 버튼을 눌렀을 경우

▶ Event 객체 ( 넷스케이프 ) - 속성

속성 기능

pageX 문서내의 X 좌표값

pageY 문서내의 Y 좌표값

screenX 화면 전체에서 x 좌표값

screenY 화면 전체에서 y 좌표값

▶ Event 객체 ( 넷스케이프 ) - 속성

<script language="JavaScript">function mouse_event(take) { document.write("x document position : " + take.pageX +

"<br>")// 문서내의 x 좌표값 출력document.write("y document position : " + take.pageY +

"<br>")// 문서내의 y 좌표값 출력 document.write("x screen position : " + take.screenX + "<br>")// 화면상의 x 좌표값 출력document.write("y screen position : " + take.screenY + "<br>")// 화면상의 y 좌표값 출력 }document.onmousedown = mouse_event // 마우스를 눌렀을시

함수를 호출 </script>

▶ 이벤트와 이벤트 핸들러

클릭

이벤트 발생

이벤트 핸들러에 의해

이벤트 처리

▶ 이벤트와 이벤트 핸들러 종류

이벤트 이벤트 핸들러 발생

blur OnBlur 포커스가 다른곳으로 이동하거나 벗어날때

click OnClick 클릭했을때

focus OnFocus 포커스를 받을때 ( 커서가 생겨나는 순간 )

load OnLoad 브라우저를 이용해서 웹 문서를 읽어올때

mousedown OnMouseDown 사용자가 마우스를 누르는 순간

Mouse ㅡ move OnMouseMove 사용자가 마우스를 움직이는 순간

▶ 이벤트 핸들러 실행 방법

<HEAD><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY><FORM><INPUT TYPE="button" VALUE=" 색상변경 " onClick="sample()">


<HEAD><SCRIPT LANGUAGE="JavaScript">function sample(color){ document.bgColor=color}</SCRIPT></HEAD><BODY><FORM><INPUT TYPE="button" VALUE=" 색상변경 " onClick="sample('red')">


<HEAD><SCRIPT LANGUAGE="JavaScript">function sample1(){alert(" 방문을 환영해요 .");}function sample2(){alert(" 다시 또 오세요 !! 안녕 .");}</SCRIPT></HEAD><BODY onLoad="sample1()"

onUnload="sample2()"><H1> Event 핸들러 예제 </H1>

▶ 이벤트 핸들러 (onBlur)

• 원도우나 프레임 , 폼의 요소 , 입력 양식 등에서 벗어날 때 즉 포커스가 다른 곳으로 이동 할때 발생합니다 .

▶ 이벤트 핸들러 (onBlur)

<HEAD><SCRIPT LANGUAGE="JavaScript">

function addCheck() {

alert(" 다른 곳으로 포커스를 옮기기전에 다시 한번 이메일을 체크하세요 ..^^")}

</SCRIPT></HEAD><BODY>

전자우편 주소 입력 <INPUT TYPE="text" VALUE="" NAME="userEmail" onBlur=addCheck()>

</BODY>

▶ 이벤트 핸들러 (onFocus)

• 원도우나 프레임 , 폼의 요소 , 입력 양식 등으로 들어올 때 즉 포커스를 받을 때 발생합니다 .


<HEAD><SCRIPT LANGUAGE="JavaScript">s1 = myForm.myText.valuefunction changeVal() { s1 = " 포커스를 받고 있네요 ..^^ 감사해요 " document.myForm.myText.value = s1} </SCRIPT></HEAD><BODY><FORM NAME=myForm><input type="text" name="myText" size="30" value=" 저에게 포커스를 주세요

^^" onFocus = "changeVal()">

▶ 이벤트 핸들러 (onFocus+onBlur)


function check(data) {

if(data.value=="") { alert(" 반드시 상품명을 입력해야 되요 .^^") data.focus() } }</SCRIPT></HEAD><BODY onLoad="document.shopping.sangpum.focus()"><FORM NAME="shopping"> 상품명 : <INPUT TYPE="text" NAME="sangpum" VALUE=""

onBlur="check(this)"><BR> 고객명 : <INPUT TYPE="text" NAME="irum">

▶ 이벤트 핸들러 (onChange)

• 입력 양식 필드에서 값이 변경되고 포커스를 잃을 때 실행됩니다 .• 예를 들면 텍스트 상자의 내용을 변경하고 마우스로 텍스트 상자 밖의 다른 곳을

클릭하는 경우나 콤보상자에서 다른 데이터를 선택하는 경우 등을 들수 있습니다 .

▶ 이벤트 핸들러 (onChange)

<HEAD><SCRIPT LANGUAGE="JavaScript">function sample() { alert(" 데이터를 변경했네요 ^^.")}</SCRIPT></HEAD><BODY><FORM NAME=myForm><SELECT NAME="sel" onChange="sample()"><OPTION VALUE=" 야구 "> 야구<OPTION VALUE=" 축구 "> 축구</SELECT></FORM>

▶ 이벤트 핸들러 (onClick)

• 폼에 위치한 모든 요소들은 마우스로 클릭했을 때 발생하는 것으로 가장 많이 사용되는 핸들러 중에 하나입니다 .


<HEAD> <SCRIPT LANGUAGE="javascript"> function vars() { var num1 = prompt(" 곱할 첫번째 숫자를 입력하세요 "," 이곳에 입력하세요 ") var num2 = prompt(" 곱할 두번째 숫자를 입력하세요 "," 이곳에 입력하세요 ") var num3 = num1*num2 alert(" 입력하신 두 숫자의 곱은 = " + num3 + " 입니다 ") var contents = " 계산을 더 원하시면 , " + " 숫자 곱하기 단추를 눌러주세요 " alert(contents) } </SCRIPT></HEAD><BODY><FORM><INPUT onClick=vars() type=button value=" 입력받은 두개의 숫자 곱하기 ">


<HEAD><SCRIPT LANGUAGE="JavaScript">function gyesan(number) { var result=eval(number.susik.value) number.gab.value=result }</SCRIPT></HEAD><BODY><FORM NAME=myForm>계산수식 입력 : <INPUT TYPE="TEXT" NAME="susik"

VALUE=""><P>결 과 값 : <INPUT TYPE="TEXT" NAME="gab" SIZE=20

VALUE=""><P><INPUT TYPE="button" VALUE=" 계산하기 "

onClick="gyesan(this.form)"><P>

▶ 이벤트 핸들러 (onDbClick)

• 마우스를 이용하여 폼의 요소를 더블클릭했을 때 발생합니다 .

▶ 이벤트 핸들러 (onDbClick)

<HEAD></HEAD><body onDblClick = "document.write('Hello World!')"> </BODY>

▶ 이벤트 핸들러 (onKeyDown)

• 사용자가 키를 누르는 순간 발생합니다 .

▶ 이벤트 핸들러 (onKeyDown)

<HEAD><SCRIPT LANGUAGE="JavaScript">function changeVal() { s1 = " 키 누르셨죠 ? " myForm.myText.value = s1} </SCRIPT></HEAD><BODY onKeyDown = "changeVal()"><FORM NAME="myForm" ><INPUT TYPE="text" NAME="myText" ></FORM></BODY>

▶ 이벤트 핸들러 (onKeyUP)

• 누른 키를 놓을 때 발생합니다 .

▶ 이벤트 핸들러 (onKeyUP)

<HEAD><SCRIPT LANGUAGE="JavaScript">function changeVal() { s1 = " 누른 키에서 손을 뗐죠 ? " myForm.myText.value = s1} </SCRIPT></HEAD><BODY onKeyUp = "changeVal()"><FORM NAME="myForm" ><INPUT TYPE="text" NAME="myText"

></FORM></BODY>

▶ 이벤트 핸들러 (onLoad)

• 브라우저에서 문서를 읽어 올떄 발생하는 핸들러로써 문서의 로딩 완료 시점과 이미지의 로딩 완료 시점에서 발생합니다 .

• 예 )• <body Onload= “ “>• <Framset Onload= “ “>• <img Onload= “ “>

▶ 이벤트 핸들러 (onLoad)

<HEAD></HEAD><BODY onLoad = "alert(' 문서의 로드와 함께 실행되는 창이에요 ^^')"></BODY>

▶ 이벤트 핸들러 (onMouseOver)

• 마우스 포인트가 이미지나 링크의 위치 할때 발생합니다 .


<HEAD><SCRIPT LANGUAGE="JavaScript">function changeImage() { document.myImage.src="home2.gif"} </SCRIPT></HEAD><BODY><IMG name="myImage" SRC="home1.gif" onMouseOver="changeImage()"> </BODY>

▶ 이벤트 핸들러 (onMouseOut)

<HEAD><SCRIPT LANGUAGE="JavaScript">function change() { alert(" 버튼위에서 벗어났네요 ?")} </SCRIPT></HEAD><BODY><FORM><INPUT TYPE="button" VALUE=" 눌러보세요 " onMouseOut="change()"> </BODY>

▶ 이벤트 핸들러 (onMouseOut+Over)

<HEAD></HEAD><BODY><A HREF="http://www.samyangm.com" onMouseOver = "document.pic1.src='home2.gif'" onMouseOut = "document.pic1.src='home1.gif'"> <IMG SRC="home1.gif" BORDER=0 NAME="pic1"> </A> </BODY>

▶ 이벤트 핸들러 (onMouseDown)

• 마우스를 클릭 했을때 ( 마우스를 누르는 순간 ) 발생하는 이벤트 핸들러

▶ 이벤트 핸들러 (onMouseDown)

<HEAD><SCRIPT LANGUAGE="JavaScript">function changeColor(a) { document.bgColor=a} </SCRIPT></HEAD><BODY><P> 바탕색을 금색으로 바꾸고 싶나요 ? 그렇다면 , <B><A onMouseDown="changeColor('gold')"> [ 이 부분 ] </A></B>

을 꾸 ~~~~~~ 욱 눌러주세요 ^^.</P> <P> 바탕색을 은색으로 바꾸고 싶나요 ? 그렇다면 , <B><A onMouseDown="changeColor('silver')"> [ 이 부분 ] </A></B>

을 꾸 ~~~~~~ 욱 눌러주세요 ^^.</P> <P> 바탕색을 동색으로 바꾸고 싶나요 ? 그렇다면 , <B><A onMouseDown="changeColor('bronze')"> [ 이 부분 ]

</A></B> 을 꾸 ~~~~~~ 욱 눌러주세요 ^^.</P>

▶ 이벤트 핸들러 (onMouseUp)

• 마우스 버튼을 눌렀다 놓을때 발생하는 이벤트 핸들러 .

▶ 이벤트 핸들러 (onMouseUp)

<head> <script language=“javascript">  </script> </head> <body onMouseUp="eventonmouseup()"> 마우스를 천천히 눌렀다 놓아 보세요 !! </body>

▶ 이벤트 핸들러 (onReset)

• Reset 버튼을 눌렀을때 발생하는 이벤트 핸들러 .

▶ 이벤트 핸들러 (onReset)

<head><script type="text/javascript"></script></head><body><form onReset="eventonreset()"

name="onrs"><input type="text" name="Rangs"><input type="reset" value=" 리 셋 버

튼 "></form>

▶ 이벤트 핸들러 (onSubmit)

• Submit 버튼을 눌렀을때 발생하는 이벤트 핸들러 .

▶ 이벤트 핸들러 (onSubmit)

<HEAD></HEAD><BODY> <FORM NAME="form1" onSubmit="alert(' 입력한 내용을 모두 전송하시려구요 ?')"> 전자우편 주소 :<INPUT TYPE="text" NAME="mail" VALUE="" SIZE="25"> <INPUT TYPE="submit" VALUE=" 내용 보내기 " NAME="submit1"></FORM></BODY>

▶ 이벤트 핸들러 (onSelect)

<HEAD><SCRIPT LANGUAGE="JavaScript">function sample() { alert(" 저를 선택하려 했군요 ?^^")} </SCRIPT></HEAD><BODY> <FORM> 전자우편 주소 :<INPUT TYPE="text" VALUE=" 저를 마우스로 블록화시켜 보세

요 " SIZE="40" onSelect="sample()">

JavaScript 12 Event Object

Technology

Transcript of JavaScript 12 Event Object