이벤트

Mia Lee·2021년 12월 2일
Java Script

목록 보기
21/25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
	이벤트(Event) : 특정 대상(요소)에 어떤 사건이 발생하는 것(= 신호)
	ex) 마우스 클릭, 키보드 키 누름, 마우스 커서 오버 등
	- 이벤트가 발생하면 해당 이벤트에 대한 감지를 통해 이벤트를 처리해야함
	  => 이벤트 발생 시 특정 동작을 수행하는 것을 이벤트 처리(Event Handling) 이라고 함
	- 이벤트 핸들링을 위해서는 이벤트 감지에 필요한 onXXX 속성을 태그에 지정하고
	  해당 이벤트가 발생하면 수행할 작업을 속성값으로 지정해야함
	  ex) => 어떤 대상을 '클릭'하면 '이벤트발생' 메세지가 출력
	- 대표적인 이벤트 종류(onXXX)
	  click : 마우스 클릭     dblclick : 마우스 더블클릭
	  mouseover : 마우스가 영역에 진입(= mouseenter 와 유사함)  mouseout : 마우스가 영역에서 빠져나감
	  focus : 대상이 선택됨(= 포커스가 위치함)   blur : 대상 선택이 해제됨
	  load : 대상 로딩이 완료됨   unload : 대상 로딩이 해제됨
	  keydown : 키보드 키 누름  keyup : 키보드 키 뗌
	  submit : 폼 데이터 전송     reset : 폼 데이터 초기화
	  
	이벤트 핸들러(Event Handler)
	- 이벤트 발생 시 수행할 동작을 기술해 놓은 함수 또는 객체
	- 이벤트가 발생되면 자동으로 onXXX 속성에 해당하는 함수 또는 객체를 실행
	*/
	function bodyOnLoad() {
// 		  alert("body - onload 이벤트");
    }
	
	function clickButton() {
		alert("버튼2 클릭됨!");
	}
	
	function changeImage1() {
// 		var imgTag = document.getElementById("img");
		// img 태그의 이미지를 away.jpg 파일로 설정(교체)
// 		imgTag.src = "away.jpg";
		
		// 별도의 변수 선언 없이 객체를 통해 직접 속성 변경 시
		document.getElementById("img").src = "away.jpg";
	}

	function changeImage2() {
		// img 태그의 이미지를 원래의 australian.jpg 파일로 설정(교체)
		document.getElementById("img").src = "australian.jpg";
	}
	
	function changeColor(color) {
		// 대상의 배경색을 전달받은 컬러로 변경
		document.getElementById("name").style.background = color;
	}
	
	function changeColor2(elem, colorCode) { //
		// tr 태그를 객체([object HTMLTableRowElement]) 형태로 전달받아 elem 변수에 저장됨
// 		alert(elem);
		// => elem 변수 사용 시 getElementById() 함수 호출 불필요
		elem.style.background = colorCode;
	}
	
	function checkInput(elem) { // 텍스트박스가 객체 형태로 전달됨
		// "checkResult" id 속성값을 갖는 span 태그를 객체 형태로 가져오기
		var spanTag = document.getElementById("checkResult");
		
		// 만약, 입력된 값이 "admin" 일 경우 "사용 불가능한 아이디입니다" 출력
		if(elem.value == "admin") {
// 			alert("사용 불가능한 아이디입니다!");
			spanTag.innerHTML = "사용 불가능한 아이디";
			spanTag.style.color = "RED";
		} else {
			// "admin" 이 아닐 경우 "사용 가능한 아이디" 출력
			spanTag.innerHTML = "사용 가능한 아이디";
			spanTag.style.color = "GREEN";
		}
	}
</script>
</head>
<body onload="bodyOnLoad()"> <!-- body 태그 내의 문서 로딩 완료 시 bodyOnLoad() 함수 호출 -->
	<h1>test13.html</h1>
	<!-- "클릭" 버튼을 클릭 시 alert() 함수를 사용하여 "버튼 클릭됨!" 출력 -->
	<input type="button" value="클릭" onclick="alert('버튼 클릭됨!')">
	<!-- "클릭2" 버튼을 클릭 시 clickButton() 함수를 호출하여 "버튼2 클릭됨!" 출력 -->
	<input type="button" value="클릭2" onclick="clickButton()"><br>
	<!-- "마우스를 가져대 대세요" 버튼에 mouseover, mouseout 이벤트 처리 -->
	<input type="button" value="마우스를 가져다 대세요"
			onmouseover="alert('마우스오버')" onmouseout="alert('마우스아웃')"><br>
	<img src="australian.jpg" id="img" width="200" height="150"
			onmouseover="changeImage1()" onmouseout="changeImage2()"><br>
			
	이름 : <input type="text" id="name" 
					onfocus="changeColor('LIGHTGRAY')" onblur="changeColor('WHITE')"><br>
	나이 : <input type="text" id="age"><br>
	
	<table border="1">
		<tr><th colspan="4">테이블 연습</th></tr>
		<!-- 
		테이블 행(tr)에 마우스를 가져가면 changeColor2() 함수 호출
		이 때, 파라미터로 this 전달하면 해당 이벤트가 위치한 태그를 객체로 전달
		-->
		<tr onmouseover="changeColor2(this,'#FFCCCC')" onmouseout="changeColor2(this,'WHITE')">
			<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
		</tr>
		<tr onmouseover="changeColor2(this,'#FFCCCC')" onmouseout="changeColor2(this,'WHITE')">
			<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>
		</tr>
		<tr onmouseover="changeColor2(this,'#FFCCCC')" onmouseout="changeColor2(this,'WHITE')">
			<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>
		</tr>
	</table>
	
	<!-- 텍스트박스에 텍스트 입력 시(= 키 누르면) 동작할 keyup 이벤트 처리 -->
	아이디 : <input type="text" placeholder="텍스트를 입력하세요" onkeyup="checkInput(this)">
	<span id="checkResult"><!-- 아이디 체크 결과가 표시될 영역 --></span>
</body>
</html>
Mia Lee
이전 포스트
시각

다음 포스트
이벤트

Java Script

시각

문서 내의 이미지에 접근하는 방법

0개의 댓글
