본문 바로가기
국비학원

[국비지원] KH 정보교육원 67일차

by 도전하는 개발자 2022. 7. 1.

kh day 067

제이쿼리를 마지막으로 UI구현을 위한 요소 기술이 종료되면
아래와 같은 백엔드 구현을 위한 선행요소 기술을 나갑니다
1) Apache Maven
2) JDBC API & Driver SPY
3) Eclipse에서 APache Maven 기반의 웹 어플리케이션 개발용 프로젝트 생성방법

위 선행요소기술을 배우시고 나면 백엔드 웹어플리케이션 개발 표준기술인 Servlet/JSP를 진행하고
이게 끝나면 Apache Mtbatis SQL Mapper Framework를 배우고
Connection Pool (DataSource)를 배우고
드디어 위의 모든 것을 동원해서 Spring Framework를 배움으로 백엔드 기술이 종료됩니다.

---

마우스 이벤트


<a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기

jq_event1_5 - click(), dbclick(), preventDefault()

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			$(".btn1").on("click", function (e) {
				e.preventDefault();  // 이벤트의 기본동작을 중지!
				$(".txt1").css({ "background-color": "red" });
			});

			$(".btn2").on("click", function (e) {
				$(".txt2").css({ "background-color": "green" });
				return false;
			});

			$(".btn3").on("dblclick", function () {
				$(".txt3").css({ "background-color": "blue" });
			});
		});
	</script>
</head>

<body>
	<p><a href="http://www.naver.com/" class="btn1">버튼1</a></p>
	<p class="txt1">네이버</p>
	
	<p><a href="http://www.daum.net/" class="btn2">버튼2</a></p>
	<p class="txt2">다음</p>
	
	<p><button class="btn3">버튼3</button></p>
	<p class="txt3">내용3</p>
</body>



mouseover( ) / mouseout( ) / hover( ) 이벤트 메서드

jq_event1_6 - mouseover( ) / mouseout( ) / hover( )

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>
	<script>
		$(function () {
			// mouseover(), mouseout()
			$(".btn1").on({
				"mouseover": function () {
					$(".txt1").css({ "background-color": "yellow" });
				},
				"mouseout": function () {
					$(".txt1").css({ "background": "none" });
				}
			});
			 
			// hover ()
			$(".btn2").hover(
				function () { $(".txt2").css({ "background-color": "aqua" }); },
				function () { $(".txt2").css({ "background": "none" }); });
		});
	</script>
</head>

<body>
	<p><button class="btn1">Mouse Over / Mouse Out</button></p>
	<p class="txt1">내용1</p>

	<p><button class="btn2">Hover</button></p>
	<p class="txt2">내용2</p>
</body>


jq_event1_7 - mouseout(), mouseleave()

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<style>
		div {
			border: 5px solid purple;
		}
	</style>

	<script>
		$(function () {
			$("#box_1").on("mouseout", function () {
				$("#box_1").css({ "background-color": "yellow" });
			}); // mouseout

			$("#box_2").on("mouseleave", function () {
				$("#box_2").css({ "background-color": "pink" });
			}); // mouseleave
		});
	</script>
</head>

<body>
	<h1>mouseout</h1>
	<div id="box_1">
		<p><a href="#">내용1</a></p>
		<p><a href="#">내용2</a></p>
		<p><a href="#">내용3</a></p>
	</div>

	<h1>mouseleave</h1>
	<div id="box_2">
		<p><a href="#">내용4</a></p>
		<p><a href="#">내용5</a></p>
		<p><a href="#">내용6</a></p>
	</div>
</body>


jq_event1_8 - mousemove()

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			$(document).on("mousemove", function (e) {
				$(".posX").text(e.pageX);
				$(".posY").text(e.pageY);
			});
		});
	</script>
</head>

<body>
	<h1>mousemove</h1>
	<p>X : <span class="posX">0</span>px</p>
	<p>Y : <span class="posY">0</span>px</p>
</body>


---

이벤트 객체와 종류


---

jq_event1_9 - scroll( )

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<style>
		body {
			height: 10000px;
			width: 5000px;
		}

		#wrap {
			position: fixed;
			left: 10px;
			top: 10px;
		}
	</style>

	<script>
		$(window).on("scroll", function () {
			var sc_top = $(this).scrollTop();
			var sc_left = $(this).scrollLeft();

			$(".top").text(sc_top);
			$(".left").text(sc_left);
		});
	</script>
</head>

<body>
	<div id="wrap">
		<p>scrollTop: <span class="top">0</span>px</p>
		<p>scrollLeft: <span class="left">0</span>px</p>
	</div>
</body>


---

포커스 이벤트

jq_event2_1 - focus(), blur(), focusin(), focusout()
focus(), blur()와 focusin() focusout() 차이는 없지만 주로 focus()와 blur()를 사용한다

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			$("#user_id_1, #user_pw_1").on("focus",	function () {
					$(this).css({ "background-color": "pink" });
				});
			$("#user_id_1, #user_pw_1").on("blur", function () {
					$(this).css({ "background-color": "#fff" });
				});

			$("#user_id_2, #user_pw_2").on("focusin", function () {
					$(this).css({ "background-color": "pink" });
				});
			$("#user_id_2, #user_pw_2").on("focusout", function () {
					$(this).css({ "background-color": "#fff" });
				});
			
			// focus(), blur()와 focusin() focusout() 차이는 없다
		});
	</script>
</head>

<body>
	<h1>focus / blur</h1>
	<form action="#">
		<p>
			<label for="user_id_1">ID</label>
			<input type="text" name="user_id_1" id="user_id_1">
		</p>
		<p>
			<label for="user_pw_1">PW</label>
			<input type="password" name="user_pw_1" id="user_pw_1">
		</p>
	</form>
	
	<h1>focusin / focusout</h1>
	<form action="#" id="frm_2">
		<p>
			<label for="user_id_2">ID</label>
			<input type="text" name="user_id_2" id="user_id_2">
		</p>
		<p>
			<label for="user_pw_2">PW</label>
			<input type="password" name="user_pw_2" id="user_pw_2">
		</p>
	</form>
</body>




키보드로 마우스 이벤트 대응하기

jq_event2_2

<script>
		$(function () {
			$("#btn1") 
			    // 선택한 요소노드에 객체(데이터 저장)
				.data({ "text": "javascript" })
				.on({ // 객체 리터럴을 이용한 그룹 이벤트 등록
					"mouseover": overFnc, // 키보드 접근성 무시
					"mouseout": outFnc    // 키보드 접근성 무시
				});

			$("#btn2") 
			    // 선택한 요소노드에 객체(데이터 저장)
				.data({ "text": "welcome!" })
				.on({ // 객체 리터럴을 이용한 그룹 이벤트 등록
					"mouseover focus": overFnc,  // 키보드 접근성 고려
					"mouseout blur": outFnc      // 키보드 접근성 고려
				});

			function overFnc() { // hoisting
				$(".txt").text($(this).data("text")); 
			}
			
			function outFnc() { // hoisting
				$(".txt").text("");
			}
		});
	</script>
</head>

<body>
	<p><button id="btn1">버튼1</button></p>
	<p><button id="btn2">버튼2</button></p>
	<p class="txt"></p>
</body>


---

그룹 이벤트 등록 메서드

 


jq_event2_6 - on() ('라이브' 이벤트 등록 방식)

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>

	<script>
		$(function () {
			// on() : 이벤트 등록
			$(".btn_1.on").on("mouseover focus", function () {
				alert("HELLO!");
			});
			$(".btn_1").addClass("on"); // 새롭게 생성된 요소에는 이벤트가 등록되지 않는다.

			// on() : '라이브' 이벤트 등록방식
			$(document).on("mouseover focus", ".btn_2.on", function () {
				alert("WELCOME!");
			});
			$(".btn_2").addClass("on"); // 새롭게 생성된 요소에 이벤드 등록 가능!
		});
	</script>
</head>

<body>
	<div id="wrap">
		<p><button class="btn_1">버튼1</button></p>
		<p><button class="btn_2">버튼2</button></p>
	</div>
</body>


jq_event2_7 - delegate(), one()

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>
	<script>
		$(function () {
			// delegate ()
			$(".btn_wrap").delegate(".btn_1.on", "mouseover focus", function () {
					alert("HELLO!");
				});
			$(".btn_1").addClass("on"); // 새롭게 생성된 요소에 이벤드 등록 가능!

			// one () : 1회성
			$(document).one("mouseover focus", ".btn_2.on", function () {
					alert("WELCOME!");
				});
			$(".btn_2").addClass("on"); // 새롭게 생성된 요소에 이벤드 등록 가능!
		});
	</script>
</head>

<body>
	<div id="wrap">
		<p class="btn_wrap"> <button class="btn_1">버튼1</button> </p>
		<p> <button class="btn_2">버튼2</button> </p>
	</div>
</body>



이벤트 제거 메서드

jq_event2_8 - off() 

<head>
	<meta charset="UTF-8">
	<title> 이벤트 </title>
	<script src="js/jquery.js"></script>
	<script>
		$(function () {
			$(".btn_1").on("mouseover", function () {
				alert("HELLO!");
			}); // 기본 단일 이벤트 등록

			$(document).on("mouseover", ".btn_2", function () {
				alert("WELCOME!");
			}); // 라이브 단일 이벤트 등록

			// 제이쿼리 함수로 새로운 요소 만들기
			var btn_2 = $("<p><button class=\"btn_2\">버튼2</button></p>");
			$("#wrap").append(btn_2);

			$(".del_1").on("click", function () {
				$(".btn_1").off("mouseover"); // 이벤트 등록 해제
			});

			$(".del_2").on("click", function () {
				$(document).off("mouseover", ".btn_2"); // 라이브 이벤트 등록 해제
			});
		});
	</script>
</head>

<body>
	<div id="wrap">
		<p><button class="btn_1">버튼1</button></p>
	</div>
	<p>
		<button class="del_1">버튼1 이벤트 해지</button>
		<button class="del_2">버튼2 이벤트 해지</button>
	</p>
</body>


---

'국비학원' 카테고리의 다른 글

[국비지원] KH 정보교육원 69-74일차  (0) 2022.07.13
[국비지원] KH 정보교육원 68일차  (0) 2022.07.04
[국비지원] KH 정보교육원 66일차  (0) 2022.07.01
[국비지원] KH 정보교육원 65일차  (0) 2022.06.30
[국비지원] KH 정보교육원 64일차  (0) 2022.06.29

관련글

티스토리툴바