반응형
SMALL
Event 객체
자바스크립트 BOM 객체(브라우저 객체) 중 웹화면에서 발생하는 모든 움직임을 관리하는 객체.
객체 생성은 없음.
<속성변수 호출>
event.속성변수
| event 종류 | |
| abort | 이미지 로드 실패 |
| blur | 입력양식에 있던 커서가 빠져나감(예 : 검색창에 검색어를 치다가 검색버튼을 누름) |
| change | 입력양식의 내용 변경(value 값 변경) |
| click | 마우스 왼쪽버튼 클릭 |
| dbclick | 마우스 왼쪽버튼 더블클릭 |
| dragdrop | 마우스 드래그 |
| error | 에러 발생 |
| focus | 입력창양식에 없던 커서가 생겨남(예 : 네이버 들어가면 자동으로 검색창에 커서가 가 있음) |
| keydown | 키보드 누름 |
| keypress | 키보드 누름 |
| keyup | 키보드에서 눌렀다가 손을 뗌 |
| load | 웹브라우저에서 html 문서가 읽혀짐 |
| unload | 웹브라우저에서 html 문서가 없어짐 |
| mousedown | 마우스 누름 |
| mousemove | 마우스 움직임 |
| mouseout | 마우스가 지정한 영역을 벗어남(왔다 땜) |
| mouseover | 마우스가 지정한 영역에 들어옴(갖다댐) |
| mouseup | 마우스를 누른 후 뗌 |
| reset | form 태그 내부의 입력양식을 초기화 즉, 체크는 풀고 키보드로 입력한 데이터는 지움 |
| resize | 화면의 크기를 변경 |
| scroll | 스크롤 |
| select | 입력양식의 내용 중 특정 내용을 선택 |
| submit | 서버로 폼의 데이터를 전송 |
| 기타 등등 | |
| event 객체의 속성변수 | |
| button | 클릭한 마우스 버튼의 고유번호 저장 (왼쪽 : 1번, 오른쪽 : 2번, 가운데 : 3번) |
| keyCode | 누른 키보드의 고유번호가 저장 |
| clientX | html 문서의 기준으로 이벤트가 발생한 X좌표 저장 |
| clientY | html 문서의 기준으로 이벤트가 발생한 Y좌표 저장 |
| screenX | 웹 화면을 기준으로 이벤트가 발생할 X좌표 저장 |
| screenY | 웹 화면을 기준으로 이벤트가 발생할 Y좌표 저장 |
| altKey | Alt 키의 누름 상태 여부가 true, false 값으로 저장 |
| ctrlKey | ctrl 키의 누름 상태 여부가 true, false 값으로 저장 |
| shiftKey | Shift 키의 누름 상태 여부가 true, false 값으로 저장 |
| type | 이벤트 종류 저장 |
| 기타 등등 | |
<예제> 이벤트 객체를 이용해서 다음 화면을 만들고 기능을 구현하라.
-> 마우스 클릭 위치 : 마우스를 클릭하는 곳 좌표 출력
-> 클릭한 마우스 고유 번호 : 좌클릭, 우클릭, 가운데 클릭 시 고유번호 출력
-> 누른 키보드 번호 : 키보드 입력 시 고유번호 출력
<html>
<head>
<script>
//-----------------------------
//마우스 클릭 위치
//-----------------------------
function show1(){
//이벤트가 발생한 위치의 x 좌표를 구해 변수에 저장하기
var x = event.screenX;
//이벤트가 발생한 위치의 y 좌표를 구해 변수에 저장하기
var y = event.screenY;
//name="info1" 을 가진 입력양식의 value 속성에 클릭이 이벤트가 발생한 위치의 x좌표, y 좌표를 삽입
document.myForm.info1.value = "x좌표 : " + x + ", " + "Y좌표 : " + y ;
}
//-----------------------------
//마우스 고유번호
//-----------------------------
function show2(){
document.myForm.info2.value = event.button;
}
//-----------------------------
//누른 키보드 번호
//-----------------------------
function show3(){
document.myForm.info3.value = event.keyCode;
}
</script>
</head>입력을 위해 메모리 위치 주소값의 경로를 작성해준다.
x와 y의 경우 event 객체의 속성변수 screenX또는 screenY 안에 이벤트가 발생한 곳의 x,y 좌표가 저장되어있다.
<body
onClick = "show1()"
onMousedown = "show2()"
onKeydown = "show3()" >
<form name="myForm">
<table border=0 cellpadding=7 cellspacing=0>
<tr>
<td>마우스 클릭 위치 :
<td>
<input type="text" name="info1" size=30>
<tr>
<td>클릭한 마우스 고유번호 :
<td>
<input type="text" name="info2" size=30>
<tr>
<td>누른 키보드 번호 :
<td>
<input type="text" name="info3" size=30>
</form>
</body>
</html>body 에서 가장 중요한 부분은 바디태그 시작 전 설정하는 event의 종류이다.
event 실행을 위해 on + 이벤트 로 실행 후, 속성변수에 들어간 설정을 실행해 준다.
반응형
LIST
'[ javascript ]' 카테고리의 다른 글
| [java script 개념] html 기초 개념 정리 (0) | 2020.08.17 |
|---|---|
| [java script 개념] 자바 스크립트 기본 개념 정리 (0) | 2020.08.16 |
| [생성자 함수] 사용자 정의 객체를 이용해 테이블 출력, 데이터 내림차순 정열 예제 (0) | 2020.08.14 |
| [DOM 객체] 유효성체크 : 회원가입창에 입력된 데이터 관리하기 (0) | 2020.08.13 |
| [Window 객체] 브라우저 창을 움직이는 객체 : 페이지 이동, 카운트다운 출력하기 (0) | 2020.08.12 |
댓글