[34일차] 9장 이벤트 기초 및 활용

💛2022-08-05💛

ex9-01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 태그에 리스너 작성</title>
</head>
<body>
<h3>HTML 태그에 리스너 작성</h3>
<hr>
<p onmouseover="this.style.backgroundColor='orchid'"
   onmouseout="this.style.backgroundColor='white'">
마우스 올리면 orchid 색으로 변경</p>
</body>
</html>

ex9-02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</title>
<script>
let p;
function init() { // 문서가 완전히 로드되었을 때 호출
	p = document.getElementById("p");
	p.onmouseover = over; // over() 함수를 onmouseover 리스너로 등록
	p.onmouseout = out; // out() 함수를 onmouseout 리스너로 등록
}
function over() {
	p.style.backgroundColor="orchid";
}
function out() {
	p.style.backgroundColor="white";
}
</script></head>
<body onload="init()">
<h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
</body>
</html>

ex9-03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addEventListener()를 이용한 리스너 등록</title>
<script>
let p;
function init() { // 문서가 완전히 로드되었을 때 호출
	p = document.getElementById("p");
	p.addEventListener("mouseover", over); // 이벤트 리스너 등록
	p.addEventListener("mouseout", out); // 이벤트  리스너 등록
}
function over() {
	p.style.backgroundColor="orchid";
}
function out() {
	p.style.backgroundColor="white";
}
</script>
</head>
<body onload="init()">
<h3>addEventListener()를 이용한 리스너 등록</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
</body>
</html>

ex9-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>익명 함수로 이벤트 리스너 작성</title>
<script>
let p;
function init() { // 문서가 완전히 로드되었을 때 호출
	p = document.getElementById("p");
	p.onmouseover = function () { // 익명 함수
		this.style.backgroundColor = "orchid";
	};
	p.addEventListener("mouseout",
		function () { this.style.backgroundColor="white"; } // 익명 함수
	);
}
</script>
</head>
<body onload="init()">
<h3>익명 함수로 이벤트 리스너 작성</h3>
<hr>
<p id="p">마우스 올리면 orchid 색으로 변경</p>
</body>
</html>

ex9-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 객체 전달받기</title>
</head>
<body>
<p id="p">마우스를 올려 보세요</p>
<button onclick="f(event)">클릭하세요</button>
<script>
function f(e) { // e는 현재 발생한 이벤트 객체
	alert(e.type); // 이벤트 종류 출력
}

document.getElementById("p").onmouseover = f; // 자동으로 이벤트 객체 넘겨줌
</script>
</body>
</html>

ex9-06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 객체 프로퍼티</title>
</head>
<body>
<h3>이벤트 객체의 프로퍼티 출력</h3>
<hr>
<p id="p">버튼을 클릭하면 이벤트 객체를 출력합니다.</p>
<button onclick="f(event)">클릭하세요</button>
<script>
function f(e) { // e는 현재 발생한 이벤트 객체
	let text = "type: " + e.type + "<br>"
			+ "target: " + e.target + "<br>"
			+ "currentTarget: " + e.currentTarget + "<br>"
			+ "defaultPrevented: " + e.defaultPrevented;

	let p = document.getElementById("p");
	p.innerHTML = text; // 이벤트 객체의 프로퍼티 출력
}
</script>
</body>
</html>

ex9-07.html

이벤트의 디폴트 행동 취소

네이버로 이동할 지 물어보는 링크

ex9-08.html

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>이벤트 흐름</title></head>
<body>
<p style="color:blue">이것은
	<span style="color:red" id="span">문장입니다.
	</span>
</p>
<form>
	<input type="text" name="s">
	<input type="button" value="테스트" id="button">
	<hr>
</form>
<div id="div" style="color:green"></div>
<script>
let div = document.getElementById("div"); // 이벤트 메시지 출력 공간
let button = document.getElementById("button");

// body 객체에 캡쳐 리스너 등록
document.body.addEventListener("click", capture, true); // 켭쳐 단계(1)

// 타겟 객체에 버블 리스너 등록
button.addEventListener("click", bubble, false); // 버블 단계(2)

// body 객체에 버블 리스너 등록
document.body.addEventListener("click", bubble, false); // 버블 단계(3)

function capture(e) { // e는 이벤트 객체
	let obj = e.currentTarget; // 현재 이벤트를 받은  DOM 객체
	let tagName = obj.tagName; // 태그 이름
	div.innerHTML += "<br>capture 단계 : " + tagName + " 태그 " + e.type + "이벤트";
}

function bubble(e) { // e는 이벤트 객체
	let obj = e.currentTarget; // 현재 이벤트를 받은  DOM 객체
	let tagName = obj.tagName; // 태그 이름
	div.innerHTML += "<br>bubble 단계 : " + tagName + " 태그 " + e.type + "이벤트";
}
</script>
</body>
</html>

ex9-09.html

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>onclick</title>
<script>
function calculate() {
	let exp = document.querySelector("#exp");
	let result = document.querySelector("#result");
	result.value = eval(exp.value);
}
</script>
</head>
<body >
<h3> onclick, 계산기 만들기</h3>
<hr>
계산하고자 하는 수식을
입력하고 계산 버튼을 눌러봐요.
<br>
<br>
<form>
식 <input type="text" id="exp" value=""><br>
값 <input type="text" id ="result">
<input type="button" value=" 계산  "
	onclick="calculate()">
</form>
</body>
</html>

ex9-10.html

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>마우스 관련 리스너</title>
<script>
let width=1; // 테두리 두께
function down(obj) {
	obj.style.fontStyle = "italic";
}
function up(obj) {
	obj.style.fontStyle = "normal";
}
function over(obj) {
	obj.style.borderColor = "violet";
	// 테두리 폭이 0일 때 색은 보이지 않는다.
}
function out(obj) {
	obj.style.borderColor = "lightgray";
}
function wheel(e, obj) { // e는 이벤트 객체
	if(e.wheelDelta < 0) { // 휠을 아래로 굴릴 때
		width--; // 폭 1 감소
		if(width < 0) width = 0; // 폭이 0보다 작아지지 않게
	}
	else // 휠을 위로 굴릴 때
		width++; // 폭 1 증가
	obj.style.borderStyle = "ridge";
	obj.style.borderWidth = width+"px";
}
</script>
</head>
<body >
<h3>마우스 관련 이벤트 리스너</h3>
<hr>
<div>마우스 관련
	<span onmousedown="down(this)"
		  onmouseup="up(this)"
		  onmouseover="over(this)"
		  onmouseout="out(this)"
		  onwheel="wheel(event, this)"
		  style="display:inline-block">이벤트
	 </span>가 발생합니다.
</div>
</body>
</html>

ex9-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 이벤트 객체의 프로퍼티</title>
<style>
div {
	background : skyblue;
	width : 250px;
}
</style>
</head>
<body>
<h3>마우스 이벤트 객체의 프로퍼티와 onmousemove</h3>
<hr>
이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고,
마우스의 위치를 보여줍니다.<br><br>
<img src="media/beach.png" onmousemove="where(event)"><br><br>
<div id="div"></div>
<script>
let div = document.getElementById("div");
function where(e) {
	let text = "버튼=" + e.button + "<br>";
	text += "(screenX, screenY)=" + e.screenX + "," + e.screenY + "<br>";
	text += "(clientX, clientY)=" + e.clientX + "," + e.clientY + "<br>";
	text += "(offsetX, offsetY)=" + e.offsetX + "," + e.offsetY + "<br>";
	text += "(x, y)=" + e.x + "," + e.y + "\n";
	div.innerHTML = text;
}
</script>
</body>
</html>

ex9-12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>oncontextmenu</title>
<script>
function hideMenu() {
	alert("오른쪽 클릭<컨텍스트 메뉴>금지");
	return false;
}
document.oncontextmenu=hideMenu;
</script>
</head>
<body>
<h3>oncontextmenu에서 컨텍스트 메뉴 금지</h3>
<hr>
마우스 오른쪽 클릭은 금지됩니다. 아무곳이나
클릭해도 컨텍스트 메뉴를 볼 수 없습니다.<br>
<img src="media/beach2.png" alt="miami">
</body>
</html>

ex9-13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서의 onload</title>
</head>
<body onload="alert('이 사이트는 2022년 9월1일부터 \
www.js.co.kr로 옮겨지게 됩니다.')">
<h3>HTML 문서의 로딩 완료, onload</h3>
<hr>
이 페이지는 onload 리스너의 사용 예를 보여줍니다
이 페이지가 출력되고 난 바로 직후 onload 리스너를 통해
경고창을 출력합니다.
</body>
</html>

ex9-14.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onload로 이미지 크기 출력</title>
<script>
function changeImage() {
	let sel = document.getElementById("sel");
	let img = document.getElementById("myImg");
	img.onload = function () {
		 // 이미지 크기 출력
	 	let mySpan = document.getElementById("mySpan");
		mySpan.innerHTML = img.width + "x" + img.height;
	}
	let index= sel.selectedIndex; // 선택된 옵션 인덱스
	img.src = sel.options[index].value; // <option>의 value 속성
	// 이미지 로딩 시작, 완료 후 onload 리스너 호출
}
</script>
</head>
<body onload="changeImage()">
<h3>onload로 이미지 크기 출력</h3>
<hr>
<form>
<select id="sel" onchange="changeImage()">
	<option value="media/apple.png">사과
	<option value="media/banana.png">바나나
	<option value="media/mango.png">망고
</select>
<span id="mySpan">이미지 크기</span>
</form>
<p><img id="myImg" src="media/apple.png" alt="."></p>
</body>
</html>

ex9-15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new Image()로 이미지 로딩</title>
<script>
// 미리 로딩해 둘 8개의 이미지 파일 이름 배열
let files = ["media/Penguins.png",
             "media/Lighthouse.png",
             "media/Chrysanthemum.png",
             "media/Desert.png",
             "media/Hydrangeas.png",
             "media/Jellyfish.png",
             "media/Koala.png",
             "media/Tulips.png"];
let imgs = new Array(); // 이미지 객체를 저장할 배열
for(let i=0; i<files.length; i++) {
	imgs[i] = new Image(); // 이미지 객체 생성
	imgs[i].src = files[i]; // 이미지 로딩 지시
}

let next = 1;
function change(img) { // 다음 이미지 출력
	img.src = imgs[next].src; // 이미지 변경
	next++; // 다음 이미지에 대한 인덱스
	next %= imgs.length; // 개수를 넘으면 처음으로
}
</script>
</head>
<body>
<h3>new Image()로 이미지 로딩</h3>
<hr>
이미지를 클릭하면 다음 이미지를 보여줍니다.<p>
<img style="border:20px ridge wheat"
	src="media/Penguins.png" alt="."
	width="200" height="200"
	onclick="change(this)">
</body>
</html>

ex9-16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onfocus와 onblur</title>
<script>
function checkFilled(obj) {
	if(obj.value == "") { // obj에 입력된 것이 없다면
		obj.focus(); // obj에 다시 포커스
	}
}
</script>
</head>
<body onload=
	"document.getElementById('name').focus();">
<h3>onfocus와 onblur</h3>
<hr>
<p>이름을 입력하지 않고 다른 창으로
이동할 수 없습니다.</p>
<form>
이름 <input type="text" id="name"
			onblur="checkFilled(this)"><p>
학번 <input type="text">
</form>
</body>
</html>

ex9-17.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택된 라디오버튼 알아내기</title>
<script>
function findChecked() {
	let found = null;
	let kcity = document.getElementsByName("city");
	for(let i=0; i<kcity.length; i++) {
		if(kcity[i].checked == true)
			found = kcity[i];
	}
	if(found != null)
		alert(found.value + "이 선택되었음");
	else
		alert("선택된 것이 없음");
}
</script>
</head>
<body>
<h3>버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h3>
<hr>
<form>
	<input type="radio" name="city" value="seoul" checked>서울
	<input type="radio" name="city" value="busan">부산
	<input type="radio" name="city" value="chunchen">춘천
	<input type="button" value="find checked" onclick="findChecked()">
</form>
</body>
</html>

ex9-18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택된 물품 계산하기</title>
<script>
let sum=0;
function calc(cBox) {
	if(cBox.checked)
		sum += parseInt(cBox.value);
	else
		sum -= parseInt(cBox.value);
	document.getElementById("sumtext").value = sum;
}
</script>
</head>
<body>
<h3>물품을 선택하면 금액이 자동 계산됩니다</h3>
<hr>
<form>
	<input type="checkbox" name="hap" value="10000"
		onclick="calc(this)">모자 1만원
	<input type="checkbox" name="shose" value="30000"
		onclick="calc(this)">구두 3만원
	<input type="checkbox" name="bag" value="80000"
		onclick="calc(this)">명품가방 8만원<br>
	지불하실 금액 <input type="text" id="sumtext" value="0" >
</form>
</body>
</html>

ex9-19.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 객체에서 선택한 과일출력</title>
<script>
function drawImage() {
	let sel = document.getElementById("fruits");
	let img = document.getElementById("fruitimage");
	img.src = sel.options[sel.selectedIndex].value;
}
</script>
</head>
<body onload="drawImage()">
<h3>select 객체에서 선택한 과일 출력</h3>
<hr>
과일을 선택하면 이미지가 출력됩니다.<p>
<form>
<select id="fruits" onchange="drawImage()">
	<option value="media/strawberry.png">딸기
	<option value="media/banana.png" selected>바나나
	<option value="media/apple.png">사과
</select>
<img id="fruitimage" src="media/banana.gif" alt="">
</form>
</body>
</html>

ex9-20.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키 이벤트</title>
<script>
function whatKeyDown(e) {
	let str = "";
	let div = document.getElementById("div");
	div.innerHTML = ""; // div 객체 내용 초기화
	str += "e.key = " + e.key + "<br>";
	str += "e.code = " + e.code + "<br>";
	div.innerHTML = str; // div 객체에 html 문자열 출력
}
</script>
</head>
<body>
<h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3>
<hr>
텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.<br>
<input type="text" id="text" onkeydown="whatKeyDown(event)">
<div id="div" style="background-color:skyblue; width:250px; height:50px">
</div>
</body>
</html>

ex9-21.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>키 이벤트 응용</title>
<style>
	td { width:50px; height:50px; border:1px solid orchid;  }
</style>
<script>
let tds;
let prevIndex=0, index=0;
window.onload = function () { // 웹 페이지의 로딩 완료시 실행
	tds = document.getElementsByTagName("td");
	tds[index].style.backgroundColor = "orchid";
}
window.onkeydown = function (e) {
	switch(e.key) {
		case "ArrowDown" :
			if(index/3 >= 2) return; // 맨 위 셀의 경우
			index += 3;
			break;
		case "ArrowUp" :
			if(index/3 < 1) return; // 맨 아래 셀의 경우
			index -= 3;
			break;
		case "ArrowLeft" :
			if(index%3 == 0) return; // 맨 왼쪽 셀의 경우
			index--;
			break;
		case "ArrowRight" :
			if(index%3 == 2) return; // 맨 오른쪽 셀의 경우
			index++;
			break;
	}
	tds[index].style.backgroundColor = "orchid";
	tds[prevIndex].style.backgroundColor = "white";
	prevIndex = index;
}
</script></head>
<body>
<h3>상하좌우 키로 셀 이동하기</h3><hr>
<table>
	<tr><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td></tr>
</table>
</body></html>

'IT > HTML' 카테고리의 다른 글

[35일차] 웹 페이지 제작 (0)	2022.08.08
[34일차] 10장 윈도우와 브라우저 관련 객체 (0)	2022.08.05
[34일차] 8장 HTML DOM과 Document (0)	2022.08.05
[33일차] 7장 자바스크립트 코어 객체와 배열 (0)	2022.08.04
[33일차] js02 (0)	2022.08.04

blog

노력하는 개발자

[34일차] 9장 이벤트 기초 및 활용

💛2022-08-05💛

ex9-01.html

ex9-02.html

ex9-03.html

ex9-04.html

ex9-05.html

ex9-06.html

ex9-07.html

이벤트의 디폴트 행동 취소

ex9-08.html

ex9-09.html

ex9-10.html

ex9-11.html

ex9-12.html

ex9-13.html

ex9-14.html

ex9-15.html

ex9-16.html

ex9-17.html

ex9-18.html

ex9-19.html

ex9-20.html

ex9-21.html

'IT > HTML' 카테고리의 다른 글

댓글

티스토리툴바

[34일차] 9장 이벤트 기초 및 활용

💛2022-08-05💛

ex9-01.html

ex9-02.html

ex9-03.html

ex9-04.html

ex9-05.html

ex9-06.html

ex9-07.html

이벤트의 디폴트 행동 취소

ex9-08.html

ex9-09.html

ex9-10.html

ex9-11.html

ex9-12.html

ex9-13.html

ex9-14.html

ex9-15.html

ex9-16.html

ex9-17.html

ex9-18.html

ex9-19.html

ex9-20.html

ex9-21.html

'IT > HTML' 카테고리의 다른 글

관련글

댓글

티스토리툴바