Whiteship's Note

JavaScript Events

AJAX/JavaScript : 2007.07.09 13:33


참조 : http://www.w3schools.com/js/js_events.asp

Events are actions that can be detected by JavaScript.


이벤트
자바스크립트를 사용하면 동적인 웹 페이지를 만들 수 있다. 이벤트는 자바스크립트에 의해 확인될 수 있는 액션이다.

웹 페이지의 모든 엘리먼트들은 자바스크립트 함수를 호출할 수 있는 특정 이벤트들을 가지고 있다. 예를 들어, 사용자가 버튼을 눌렀을 때 함수를 호출할 수 있는 버튼 엘리먼트의 onClick 이벤트를 사용할 수 있다. 이벤트는 HTML 태그안에 정의한다.

이벤트의 예:
    * 마우스 클릭
    * 웹 페이지 또는 이미지 로딩
    * 웹 페이지의 특정 지역으로 마우스를 올려놓는 것
    * HTML 폼의 입력 창을 선택하는 행위
    * HTML 폼 보내기
    * 키보드 입력

모든 이벤트 종류

FF : 파이어폭스 N : 네스케이프 IE : 인터넷 익스플로러
Attribute The event occurs when... FF N IE
onabort Loading of an image is interrupted 1 3 4
onblur An element loses focus 1 2 3
onchange The user changes the content of a field 1 2 3
onclick Mouse clicks an object 1 2 3
ondblclick Mouse double-clicks an object 1 4 4
onerror An error occurs when loading a document or an image 1 3 4
onfocus An element gets focus 1 2 3
onkeydown A keyboard key is pressed 1 4 3
onkeypress A keyboard key is pressed or held down 1 4 3
onkeyup A keyboard key is released 1 4 3
onload A page or an image is finished loading 1 2 3
onmousedown A mouse button is pressed 1 4 4
onmousemove The mouse is moved 1 6 3
onmouseout The mouse is moved off an element 1 4 4
onmouseover The mouse is moved over an element 1 2 3
onmouseup A mouse button is released 1 4 4
onreset The reset button is clicked 1 3 4
onresize A window or frame is resized 1 4 4
onselect Text is selected 1 2 3
onsubmit The submit button is clicked 1 2 3
onunload The user exits the page 1 2 3
숫자들은 무얼을 뜻하는건지;;; 모르겠네요.

onload and onUnload
페이지에 들어오거나 떠날 때 발생하는 이벤트.
onload를 사용하여 사용자의 브라우저 타입을 확인하여 그에 맞는 페이지를 보여줄 수 있다.
주로 웹 페이지에 들어오거나 나갈 때 쿠키를 다루기 위해 사용한다. 예를 들어, 페이지를 처음 방문할 때 팝업 창을 띄워서 이름을 물어보고 다음에 방문 할 때 "Hi, 기선"과 같이 인사말을 뿌릴 수 있다.

onFocus, onBlur and onChange
폼의 필드를 검증할 때 주로 사용한다.
다음의 코드는 사용자가 폼의 컨텐츠를 변경 시킬 때 마다 checkEmail() 함수를 호출한다.
<input type="text" size="30"
id="email" onchange="checkEmail()">;

onSubmit
폼을 제출 하기 전에 폼의 모든 필드를 검증할 때 사용한다.
예를 들어 폼을 제출하기 전에 checkForm() 함수에서 검증을 하고 그 결과 에러가 있으면 제출하지 않고 에러가 없으면 제출하도록 다음과 같이 코딩할 수 있다. checkForm() 함수가 true를 반환하면 제출되고 false를 반환하면 제출되지 않는다.
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">

onMouseOver and onMouseOut
'변하는'버튼을 만들 때 사용합니다.

'AJAX > JavaScript' 카테고리의 다른 글

JavaScript Guidelines  (0) 2007.07.09
JavaScript Special Characters  (0) 2007.07.09
JavaScript The onerror Event  (2) 2007.07.09
JavaScript Throw Statement  (0) 2007.07.09
JavaScript Try...Catch Statement  (0) 2007.07.09
JavaScript Events  (2) 2007.07.09
JavaScript For Loop와 While Loop  (1) 2007.07.09
JavaScript Functions  (0) 2007.07.09
JavaScript Popup Boxes  (0) 2007.07.09
JavaScript Operators  (0) 2007.07.09
JavaScript If...Else와 Switch Statement  (0) 2007.07.09
top