[JQuery-3.6.0] 이벤트(Event) 처리

이벤트 종류
1. 마우스 이벤트 : 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트.
2. 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트.
이때 눌린 키에 대한 정보가 이벤트에 담김.
3. 태그 요소 고유 이벤트 : 요소마다 발생하는 고유의 이벤트.
4. 사용자 정의 이벤트 : 개발자가 직접 만들어 사용하는 이벤트.

이벤트 형식) $("요소선택").on("이벤트 이름", 이벤트리스너)

이벤트 목록
blur, change, load, unload, resize, scroll, select, submit, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,
focus, keydown, keypress, keyup ...(아주 많은 종류)

1. 마우스 이벤트

- mouseout()
형식) $("요소선택").mouseout(function() {.....});
- mouseover()
형식) $("요소선택").mouseover(function() {.....});
- hover()
형식) $("요소선택").hover(
function() {.....}), ==> 마우스가 올라갔을 때 실행
function() {.....}); ==> 마우스가 벗어났을 때 실행

- mouseenter() : 선택한 요소의 경계 범위 내에 마우스가 올라갔을 때 이벤트 발생.
형식) $("요소선택").mouseenter(function() { .....});
- mouseleave() : 선택한 요소의 경계 범위 내에서 마우스가 떠났을 때 이벤트 발생.
형식) $("요소선택").mouseleave(function() { .....});
- mousemove() : 선택한 요소의 영역에서 마우스를 움직일 때마다 이벤트 발생.
형식) $("요소선택").mousemove(function() { .....});

2. 키보드 이벤트

- keypress() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 문자 키를 제외한 키 코드값을 반환.
형식) $("요소선택").keypress(function(매개변수) {.....});
- keydown() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생.
형식) $("요소선택").keydown(function(매개변수) {.....});
- keyup() : 선택한 요소에서 키보드를 눌렀다 떼었을 때 이벤트가 발생.
형식) $("요소선택").keyup(function(매개변수) {.....});

3. 자주 사용되는 이벤트 메서드
- change() : 선택한 입력 요소에 값이 새 값으로 변경되고 포커스가 다른 요소로 이동이 되었을 때 이벤트가 발생

마우스 클릭과 더블 클릭

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$(".btn").on("click", function() {
			alert("환영합니다.");
		});
		
		$(".menu li").on("click", function() {
			alert($(this).html());
		});
		
		//방법1
		$(".btn1").on("click", function() {
			$("p").css("background-color","yellow");
		});
		
		//방법2
		$(".btn1").click(function() {
			$("p").css("background-color","yellow");
		});
		
		//방법1
		$(".btn2").on("dblclick", function() {
			$("p").css("border","2px solid tomato");
		});
		
		//방법2
		$(".btn2").dblclick(function() {
			$("p").css("border","2px solid tomato");
		});
	});

</script>
</head>
<body>
	<button class="btn">확인</button>
	
	<ul class="menu">
		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>
		<li>menu4</li>
		<li>menu5</li>
	</ul>
	
	<button class="btn1">click</button>
	<button class="btn2">dbclick</button>
	<br><br><br>
	
	<p>내용</p>
</body>
</html>

마우스 아웃과 마우스 오버

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$(".btn1").on("mouseover", function() {
			$("p").css("background-color", "pink");
		});
		$(".btn1").on("mouseout", function() {
			$("p").css("background-color", "lightgray");
		});
		
		$(".btn2").hover(
			function() { //마우스가 올라갔을 때
				$("p").css("border","2px solid red");
			},
			function() { //마우스가 벗어났을 때
				$("p").css("background-color","yellow");
			});
		
	});

</script>
</head>
<body>
	<button class="btn1">mouseover/out</button>
	<button class="btn2">hover</button>
	<br><br><br>
	
	<p>내용</p>
</body>
</html>

mouseenter, mouseleave, mousemove / 마우스 좌표값

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$(".wrap").mouseenter(function() {
			$("p").css("background-color", "blue");
		});
		
		$(".wrap").on("mouseleave", function() {
			$("p").css("background-color", "yellow");
		});
		
		$(document).on("mousemove", function(e) {
			let x = e.pageX; //마우스의 x좌표값
			let y = e.pageY; //마우스의 y좌표값
			$("h2").text("x: "+x+", y : "+y);
		});
	});

</script>
<style type="text/css">
	 * {
		margin : 0px;
		padding : 0px;
	 }
	 
	 body {
	 	margin : 20px;
	 	
	 }
	 
	 .wrap {
	 	background-color: #ccc;
	 	padding: 10px;
	 }
</style>
</head>
<body>
	<div class="wrap">
		<p>내용</p>
	</div>
	
	<h2></h2>
</body>
</html>

키보드 관련 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$("#user_id").keypress(function(e) {
			$(".txt2").text(e.keyCode);
		});
		
		$("#user_id").keydown(function(e) {
			$(".txt1").text(e.keyCode);
			$(this).css("background-color", "yellow");
		});
		
		$("#user_id").keyup(function(e) {
			$(this).css("background-color", "tomato");
		});
	});

</script>
</head>
<body>
	<p>
		<input type="text" name="user_id" id="user_id">
	</p>
	
	<p class="txt1"></p>
	<p class="txt2"></p>
	
</body>
</html>

선택(포커스) 시 발생 메서드(change())

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$(".site").on("change", function() {
			$(".txt").text($(this).val());
		});
	});

</script>
</head>
<body>
	<select class="site">
		<option value="www.naver.com">네이버</option>
		<option value="www.google.com">구글</option>
		<option value="www.daum.net">다음</option>
		<option value="www.nate.com">네이트</option>
	</select>
	
	<p class="txt"></p>
</body>
</html>

(드롭박스가 촬영이 안됨..)

저작자표시 (새창열림)

'Front > JQuery' 카테고리의 다른 글

[네이버지도API] 해당 지역에 마커 찍기, 마커 아이콘 변경 (0)	2021.07.12
[JQuery-3.6.0] 효과-애니메이션(Animation) 처리 (0)	2021.04.29
[JQuery-3.6.0] 요소(속성) 편집 메서드 (0)	2021.04.28
[JQuery-3.6.0] 요소(속성) 조작, 수치 조작 메서드 (0)	2021.04.28
[JQuery-3.6.0] 속성 탐색 선택자 (0)	2021.04.28