본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.
이벤트(event)란
- 일반적으로는 프로그래밍적으로 어떤 사건이 일어난 순간을 의미
- 자바스크립에서의 이벤트란 브라우져에서 발생하는 사건들(클릭, 스크롤, 페이지전환 등등)
- 이벤트가 발생했을 때 실행될 로직을 작성한다.
- 이벤트는 태그에 기술하는 인라인(inline)방식과 리스너(Listener)방식이 있다.
예제
인라인 방식
example1.html - (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<script type="text/javascript">
function gogogo() {
alert('push');
}
</script>
<input type="button" value="push" onclick="gogogo()" />
</body>
</html>
example2.html - (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <select onchange="alert(this.value)"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select> </body> </html>
리스너 방식
example3.html - (jsfiddle, github)
- addEventlistener는 하나의 엘리먼트에 여러개의 이벤트 핸들러를 걸수있다
- 브라우저간의 호환성을 위해서 조건문을 사용했다. 이러한 기법을 크로스브라우징이라고 한다.
- 이벤트 핸들러란 이벤트가 발생했을 때 실행될 로직을 의미한다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<input type="text" id="test" />
<script type="text/javascript">
// id test인 텍스트 필드를 가져온다
var test = document.getElementById('test');
//이벤트 핸들러
function testHandler() {
alert('blur');
}
//attachEvent는 ie에서만 지원하기 때문에 attachEvent가 지원되는지 확인하기 위해서 조건문을 사용
//blur란 포커스가 텍스트 필드에서 벗어났을 때 발생하는 내장된 이벤트를 의미한다.
if (test.addEventListener)// W3C DOM
test.addEventListener('blur', testHandler, false);
else if (test.attachEvent)// IE DOM
var r = test.attachEvent("on" + 'blur', testHandler);
//이벤트 핸들러2
function testHandler2() {
alert('blur2');
}
if (test.addEventListener)// W3C DOM
test.addEventListener('blur', testHandler2, false);
else if (test.attachEvent)// IE DOM
var r = test.attachEvent("on" + 'blur', testHandler2);
</script>
</body>
</html>
onAbort |
Image |
The loading of the image is cancelled. |
onBlur |
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window |
The object in question loses focus (e.g. by clicking outside it or pressing the TAB key). |
onChange |
FileUpload, Select, Text, TextArea |
The data in the form element is changed by the user. |
onClick |
Button, Document, Checkbox, Link, Radio, Reset, Submit |
The object is clicked on. |
onDblClick |
Document, Link |
The object is double-clicked on. |
onDragDrop |
Window |
An icon is dragged and dropped into the browser. |
onError |
Image, Window |
A JavaScript error occurs. |
onFocus |
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window |
The object in question gains focus (e.g. by clicking on it or pressing the TAB key). |
onKeyDown |
Document, Image, Link, TextArea |
The user presses a key. |
onKeyPress |
Document, Image, Link, TextArea |
The user presses or holds down a key. |
onKeyUp |
Document, Image, Link, TextArea |
The user releases a key. |
onLoad |
Image, Window |
The whole page has finished loading. |
onMouseDown |
Button, Document, Link |
The user presses a mouse button. |
onMouseMove |
None | The user moves the mouse. |
onMouseOut |
Image, Link |
The user moves the mouse away from the object. |
onMouseOver |
Image, Link |
The user moves the mouse over the object. |
onMouseUp |
Button, Document, Link |
The user releases a mouse button. |
onMove |
Window |
The user moves the browser window or frame. |
onReset |
Form |
The user clicks the form's Reset button. |
onResize |
Window |
The user resizes the browser window or frame. |
onSelect |
Text, Textarea |
The user selects text within the field. |
onSubmit |
Form |
The user clicks the form's Submit button. |
onUnload |
Window |
The user leaves the page. |
