반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
- 이벤트와 이벤트 핸들러
- 이벤트 종류
- 이벤트 핸들러 지정
이벤트핸들러는 html속성으로 지정할수 있다.
사용하는 방법은 각 이벤트 앞에 on을 붙여 주기만 하면 된다.
예)onclick,onload,onmousedown...등예제1 실행화면 <script language="javascript">
<!--
function mouse1() {
alert("마우스가 링크로 올라왔습니다")
}
//-->
</script>
<a onmouseover=mouse1() >마우스를 올려보세요</a>
마우스를 올려보세요 - Event 객체
- Event 객체의 특성
- 이벤트 잡아내기
- Event를 잡아내기 위한 메소드
이벤트란 특정한 동작이 발생했다는 신호를 가리키고 이벤트 핸들러란 이벤트가 발생할 때마다 처리하는 함수 혹은 메소드이다
| 이벤트 | 의미 |
|---|---|
| focus | 입력양식 필드로 포커스가 들어왔을때 |
| blur | 입력양식 필드에서 포커스가 다른 곳으로 이동했을때 |
| change | 입력양식 필드에 있는 값을 바꾸었을때 |
| click | 입력양식이나 링크를 마우스로 클릭했을때 |
| dblclick | 마우스를 더블클릭 했을때 |
| mousedown | 마우스버튼을 눌렀을때 |
| mouseup | 마우스버튼을 눌렀다 놓았을 때 |
| mousemove | 마우스를 움직였을 때 |
| mouseout | 마우스가 링크나 특정 영역 안에 있다가 나갔을때 |
| mouseover | 링크 위로 마우스가 지나갔을때 |
| dragdrop | 마우스를 클릭한 상태에서 움직였을때 |
| keydown | 키를 입력했을때 |
| keypress | 키를 눌렀을 때 |
| keyup | 키를 눌렀다 놓았을 때 |
| load | 문서가 읽혀졌을 때 |
| unload | 문서가 없어질 때 |
| abort | 이미지를 읽다가 중단시켰을 때 |
| error | 문서나 이미지를 읽다가 에러가 발생했을 때 |
| select | 입력양식의 한필드를 선택했을 때 |
| submit | 입력양식을 서버로 보낼 때 |
| reset | 입력 양식에서 리셋 시켰을 때 |
| resize | 윈도우나 프레임의 크기를 바꾸었을때 |
| move | 윈도우나 프레임을 움직였을 때 |
| 특성 | 의미 |
|---|---|
| type | 이벤트종류 |
| which | 마우스버튼의 종류,입력키의 아스키값 |
| modifiers | 마우스와 키 이벤트 발생시 함께눌러진 Modifier키 (alt,shift,ctrl,*,?..) |
| data | dragdrop 이벤트로 선택된 객체의 URL주소 |
| target | 이벤트가 전달될 객체 |
| layerX | 이벤트가 발생한 위치의 X 좌표(레이어기준) |
| layerY | 이벤트가 발생한 위치의 Y 좌표(레이어기준) |
| pageX | 이벤트가 발생한 위치의 X 좌표(페이지 기준) |
| pageY | 이벤트가 발생한 위치의 Y 좌표(페이지 기준) |
| screenX | 이벤트가 발생한 위치의 X 좌표(화면 기준) |
| screenY | 이벤트가 발생한 위치의 Y 좌표(화면 기준) |
이벤트가 대상 객체에 전달 되기전에 먼저 이벤트를 잡아내어 처리할수가 있다.
| 메소드 | 의미 |
|---|---|
| captureEvents | 웹 페이지에서 잡아낼 이벤트 지정 |
| releaseEvents | captureEvents로 지정된 이벤트를 해제 |
| routeEvent | 잡아낸 이벤트를 처리할 이벤트 핸들러가 있는 경우 전달한다 |
| handleEvent | 이벤트를 특정 객체의 이벤트 핸들러로 전달 |