이벤트

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업과 웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

이벤트(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.

이벤트(event)란

예제

인라인 방식

리스너 방식

댓글