JavaScript Events
이벤트란 JavaScript에 의해 감지되는 액션이다.
Events
자바스크립트를 사용하는 목적 중에 웹 페이지를 동적으로 보이게 하기 위한 것이 있다.
모든 엘리먼트(요소)들은 자바스크립트에 의해 실행되는 이벤트들을 가지고 있다. 예를 들어, 클릭하면 발생하는 onclick 이벤트를 이용하여 특정 함수를 호출할 수 있는 것이다. 사용자가 버튼을 클릭하는 것 말이다.
이벤트의 종류에는 아래와 같은 것들이 있다.
- 버튼 클릭 (혹은 HTML element 클릭)
- 페이지 로딩이 끝났을 때
- 특정 이미지 로딩이 끝났을 때
- 마우스 커서가 특정 엘리먼트 위에 위치했을 때
- input 필드에 진입했을 때
- 폼을 제출,전송(서브밋) 할 때
- 키보드를 누를 때
이벤트에 대한 정의는 http://w3schools.com/jsref/dom_obj_event.asp 에서 볼 수 있다.
HTML 을 속성형태로 사용(HTML Event Attributes)
<button id="myBtn" onclick="displayDate()">Try it</button>
onclick 과 같이 태그의 속성 형태로 정의해서 사용하는 것이다. displayDate() 는 사용자 정의 함수이다. 즉, 코더가 직접 구현해야 하는 함수인 것이다. 버튼이 클릭되면 해당 함수를 실행하겠다는 의미이다.
HTML DOM 을 사용하여 이벤트 정의(Assign Events Using the HTML DOM)
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
DOM 을 이용해 특정 엘리먼트를 찾아 onclick 함수를 바인딩 하는 예제이다. 위의 예제와 같은 의미이다.
onload 와 onunload
<body onload="checkCookies()" /> document(문서, 페이지)가 로드됬을 때 또는 페이지에서 벗어날 때 발생하는 이벤트이다.
onfocus : 엘리먼트에 커서가 위치할 때
onblur : 엘리먼트에서 커서가 사라질 때
onchange : 콤보박스(select) 또는 input 필드의 값이 바뀔 때
<input type="text" onchange="checkEmail()" />
onsubmit : form을 전송할 때
<form method="post" action="mySubmit.asp" onsubmit="checkForm()">
onmouseover : 엘리먼트에 마우스 포인터가 올라올 때
onmouseout : 엘리먼트에서 마우스 포인터가 벗어날 때
onmousedown : 엘리먼트를 마우스 왼쪽으로 눌렀을 때 onmouseup : 엘리먼트를 마우스 왼쪽으로 눌렀다가 뗄 때 onclick : 엘리먼트를 클릭했을 때
'프로그래밍 > JavaScript' 카테고리의 다른 글
| JavaScript 문자열 객체 (1) | 2013.01.04 |
|---|---|
| JavaScript 반복문 For (0) | 2013.01.04 |
| JavaScript 에러 던지기 Throw (0) | 2013.01.04 |
| JavaScript 런타임 에러 제어 Try Catch (0) | 2013.01.04 |
| JavaScript 반복문 For .. in (0) | 2013.01.04 |
| JavaScript 반복문 중단하기 (0) | 2013.01.04 |
| JavaScript 반복문 While (0) | 2013.01.04 |
| JavaScript 팝업박스 (0) | 2013.01.04 |