이벤트
1. 이벤트란?
이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.
<!DOCTYPE html>
<html>
<body>
<!-- 사용자가 클릭했을 때 자바스크립트 함수 실행 -->
<input type="button" onclick="alert(window.location)" value="alert(window.href)" />
<input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>
onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다.
(1) event target
target은 이벤트가 일어날 객체(button)를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다.
<input type="button" onclick="alert(window.location)" value="alert(window.href)" />
(2) event type
이벤트의 종류를 의미한다. 위의 예제에서는 click이 이벤트 타입이다. 그 외에도 scroll은 사용자가 스크롤을 움직였다는 이벤트이고, mousemove는 마우스가 움직였을 때 발생하는 이벤트이다.
이벤트의 종류는 이미 약속되어 있다. 아래 링크는 브라우저에서 지원하는 이벤트의 종류를 보여준다.
https://developer.mozilla.org/en-US/docs/Web/Reference/Events
(3) event handler
이벤트가 발생했을 때 동작하는 코드를 의미한다. 위의 예제에서는 alert(window.location)이 여기에 해당한다. 일반적으로 함수에 많이 쓰인다.
2. 이벤트 핸들러 종류
cf.)
이벤트 타입: click
이벤트 속성: onclick
이벤트 핸들러: whenClick() / 이벤트 타입에 해당하는 이벤트가 발생했을 때 실행되는 함수.
--> 문서 객체에 이벤트에 연결하는 방법을 이벤트 모델이라고 한다.
이벤트 핸들러 | 이벤트 내용 |
onclick | 클릭할 때 |
ondblclick | 더블클릭할 때 |
onkeydown | 키를 눌렀을 때 |
onkeypress | 키를 누르고 있을 때 |
onkeyup | 눌러진 키를 원래대로 되돌릴 때 |
onmousedown | 마우스 버튼을 눌렀을 때 |
onmouseup | 마우스 버튼을 뗄 때 |
onmouseover | 마우스 포인터가 통과할 때 |
onmouseout | 마우스 포인터가 벗어날 때 |
onmouse | 마우스 포인터가 이동할 때 |
onload | 페이지 읽어올 때 |
onunload | 다른 페이지로 이동할 때 |
onfocus | 폼 부품이나 창에 초점이 맞춰질 때 |
onblur | 폼 부품이나 창으로부터 초점이 벗어날 때 |
onsubmit | 폼이 송신될 때 |
onreset | 리셋 버튼을 눌렀을 때 |
onchange | 입력란의 문자열이나 메뉴에서 선택한 항목에 변화가 있을 때 |
onsize | 창의 크기가 변경될 때 |
onmove | 창이 이동될 때 |
onabor | 그림 읽기를 중단했을 때 |
onerror | 파일이 존재하지 않거나 그림 읽기에 실패했을 때 |
onselect | 입력란의 문자열이 선택될 때 |
'WebFont-end > JavaScript' 카테고리의 다른 글
[JavaScript] 이벤트 타입 (0) | 2014.12.25 |
---|---|
[JavaScript] 이벤트 등록방법 (0) | 2014.12.25 |
[JavaScript] Text 객체 (0) | 2014.12.23 |
[JavaScript] Document 객체 (0) | 2014.12.23 |
[JavaScript] Node 객체 (1) | 2014.12.23 |