JavaScript 12 Event Object

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

Contents 학습 목표 01. 이벤트와 이벤트 핸들러 02. Event 객체

▶ Event 객체 ,[object Object],[object Object],[object Object],[object Object]

▶ Event 객체 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ Event 객체 ( 익스플로러 ) - 속성 속성 기능 x 선택한 객체에 위치해 있는 x 좌표값 y 선택한 객체에 위치해 있는 y 좌표값 screenX 화면전체에서 마우스의 x 좌표값 screenY 화면전체에서 마우스의 x 좌표값

▶ Event 객체 ( 익스플로러 ) - 속성 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ Event 객체 ( 익스플로러 ) - 속성 ,[object Object],1 왼쪽 버튼을 눌렀을 경우 5 왼쪽과 중간 버튼을 같이 눌렀을 경우 2 오른쪽 버튼을 눌렀을 경우 6 중간과 오른쪽 버튼을 같이 눌렀을 경우 3 왼쪽과 오른쪽을 같이 눌렀을 경우 7 마우스 버튼 버튼을 눌렀을 경우 4 마우스 중간 버튼을 눌렀을 경우

▶ Event 객체 ( 넷스케이프 ) - 속성 속성 기능 pageX 문서내의 X 좌표값 pageY 문서내의 Y 좌표값 screenX 화면 전체에서 x 좌표값 screenY 화면 전체에서 y 좌표값

▶ Event 객체 ( 넷스케이프 ) - 속성 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트와 이벤트 핸들러 클릭 이벤트 발생 이벤트 핸들러에 의해 이벤트 처리

▶ 이벤트와 이벤트 핸들러 종류 이벤트 이벤트 핸들러 발생 blur OnBlur 포커스가 다른곳으로 이동하거나 벗어날때 click OnClick 클릭했을때 focus OnFocus 포커스를 받을때 ( 커서가 생겨나는 순간 ) load OnLoad 브라우저를 이용해서 웹 문서를 읽어올때 mousedown OnMouseDown 사용자가 마우스를 누르는 순간 Mouse ㅡ move OnMouseMove 사용자가 마우스를 움직이는 순간

▶ 이벤트 핸들러 실행 방법 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 실행 방법 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 실행 방법 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 실행 방법 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onBlur) ,[object Object]

▶ 이벤트 핸들러 (onBlur) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onFocus) ,[object Object]

▶ 이벤트 핸들러 (onFocus) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onFocus) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onFocus+onBlur) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onChange) ,[object Object],[object Object]

▶ 이벤트 핸들러 (onChange) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onClick) ,[object Object]

▶ 이벤트 핸들러 (onClick) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onClick) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onClick) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onDbClick) ,[object Object]

▶ 이벤트 핸들러 (onDbClick) ,[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onKeyDown) ,[object Object]

▶ 이벤트 핸들러 (onKeyDown) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onKeyUP) ,[object Object]

▶ 이벤트 핸들러 (onKeyUP) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onLoad) ,[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onLoad) ,[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onMouseOver) ,[object Object]

▶ 이벤트 핸들러 (onMouseOver) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onMouseOver) ,[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onMouseOut) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onMouseOut+Over) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onMouseDown) ,[object Object]

▶ 이벤트 핸들러 (onMouseDown) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onMouseUp) ,[object Object]

▶ 이벤트 핸들러 (onMouseUp) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onReset) ,[object Object]

▶ 이벤트 핸들러 (onReset) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onSubmit) ,[object Object]

▶ 이벤트 핸들러 (onSubmit) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

▶ 이벤트 핸들러 (onSelect) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript 12 Event Object

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

JavaScript 12 Event Object