자바 스크립트의 기본: 이벤트 처리

JavaScript 2016. 2. 15. 14:10

10. 주요 이벤트

A. 마우스 관련
onClick 마우스 클릭 했을 때
onDblClick 마우스 더블 클릭했을 때
onLoad 문서가 로딩이 됐을 때
onMouseDown 마우스 버튼을 눌렀을 때
onMouseMove 마우스를 움직일 때
onMouseOut 영역을 나갔을 때
onMouseOver 마우스가 객체 위에 있을 때
onMouseUp 마우스 버튼을 떼었을 때

예제) onMouseOver / onMouseOut

function goUrl(url) {

location.href = url;

}

function setValue(v) {

var btnObj = document.getElementById('btn');

btnObj.value = v;

}

</script>

</head>

<body>

<input type = "button" onclick ="goUrl('http://naver.com')"

value="네이버" onmouseover="setValue('Naver')" onmouseout="setValue('Naver')" id="btn">

</body>

B. 키보드 관련

onKeyDown 키를 눌렀을 때
onKeyPress 키를 눌렀다 떼었을 때
onKeyUp 키를 떼었을 때

C. 기타
onBlur 객체가 포커스를 잃었을 때
onChange 객체의 값이 바뀌었을 때
onFocus 객체 포커스를 얻었을 때
onSubmit submit 버튼이 눌렸 때

D. Event 객체 속성

button 마우스 버튼의 번호(1:왼쪽, 2:오른쪽, 4:가운데)

pageX 브라우저 이벤트가 발생한 마우스의 x좌표 (clientX)
pageY 브라우저 이벤트가 발생한 마우스의 y좌표 (clientY)
screenX 화면에서 마우스 x좌표
screenY 화면에서 마우스 y좌표
offsetX 객체 내에서의 마우스 x좌표
offsetY 객체 내에서의 마우스 y좌표

keyCode 눌려진 키의 유니코드
ctrlKey ctrl키가 눌렸는지 여부
altKey alt 키가 누렸는지 여부
keyCode 눌려진 키보드의 코드 값

srcElement 이벤트가 발생한 객체 (target)
type 발생한 이벤트의 종류

예제) 마우스의 pageX, pageY, screenX, screenY를 표시

function setPosition(event) {

f1.typeStr.value = window.event.type;

f1.x.value = window.event.screenX;

f1.y.value = window.event.screenY;

f1.px.value = window.event.pageX;

f1.py.value = window.event.pageY;

}

</script>

</HEAD>

event.screenX : <input type="text" name="x">

event.screenY : <input type="text" name="y"><br>

event.pageX : <input type="text" name="px">

event.pageY : <input type="text" name="py"><br>

event.type<input type="text" name="typeStr"><br>

</form>

</div>

</BODY>

예제) 마우스 x좌표와 y좌표를 표시

function xMoveHandler(event){

Xpos = event.pageX; //마우스의 x위치

Ypos = event.pageY; //마우스의 y위치 구함

document.f1.x.value = Xpos;

document.f1.y.value = Ypos;

}

function MoveHandler() {

Xpos = document.body.scrollLeft+event.x; //마우스의 x위치 (스크롤된 값포함)

Ypos = document.body.scrollTop+event.y; //마우스의 y위치 (스크롤된 값포함)

document.f1.x.value = Xpos;

document.f1.y.value = Ypos;

}

//document.onmousemove = xMoveHandler; //마우스를 움직일때마다 MoveHandler 함수실행

</script>

</HEAD>

x<input type="text" name="x"> y<input type="text" name="y">

</form>

</div>

예제) ID 입력창에서 키보드 입력이 8글자를 넘으면 PW창으로, PW창에서 엔터를 치면 submit 처리

// 키보드의 각 키에 대한 유니코드 넙버

// backspace 8

// tab 9

// enter 13

function proc1(event) {

var userIdObj = document.getElementById("userId");

var pwObj = document.getElementById("pw");

var userIdStr = userId.value;

if(userIdStr.length >= 8 && event.keyCode != 8) { //8자를 입력하면

pwObj.focus(); // focus는 객체에 커서가 넘어감

}

function proc2(event) {

var pwObj = document.getElementById("pw");

var pwStr = pwObj.value;

if(event.keyCode == 13) { //암호에서 엔터를 누르면

var chk = confirm('이 정보로 가입하시겠습니까?');

if(chk == true) {

document.frm1.submit();// submit 처리

}

else {}

}

</script>

</head>

<body>

아이디<input type="text" id="userId" onkeydown="proc1(event)"><br />

암호<input type="password" id="pw" onkeydown="proc2(event)"><br />

</form>

</body>

E. form 이벤트 관련

1) form

① 메소드
submit()

2) checkbox / radio

① 속성 : checked 체크되어 있는지 여부(true | false)

3) select

① 속성
length : option의 수
options : options 객체
selectedIndex : 선택된 항목의 index

4) option

① 속성
text : 보여지는 라벨
value : option의 value 값

예제) 자바스크립트로 CSS를 제어하여 div의 위치 이동

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

#popupDiv {display:block;

background:gray;

border:2px dotted blue;

width:200px;position:absolute;}

body{width:1024px;height:768px;}

</style>

</head>

function showPop(event){

var pop = document.getElementById('popupDiv');

pop.style.left = event.clientX+'px';

pop.style.top = event.clientY+'px';

//pop.style.display = 'block';

}

</script>

<ol>

<li>취업을 위하여

<li>수업시간에 열심히

<li>화이팅!!

</ol>

</div>

</body>

</html>

저작자표시

'JavaScript' 카테고리의 다른 글

ECMA 스크립트에서의 배열 (0)	2016.05.24
자바스크립트로 회원가입시 문자 체크 (0)	2016.02.15
자바스크립트로 간단한 덧셈 뺄셈 연산 (0)	2016.02.15
자바 스크립트의 기본: Array, String, Date, Math, DOM, 브라우저 객체 (0)	2016.02.15
자바 스크립트의 기본: 제어문, 함수 function (0)	2016.02.15