[TIL] 제이쿼리 - 이벤트 메서드

Hyeonu_J·2021년 12월 23일

TIL jquery

공부할 책 : Do it! 자바스크립트 + 제이쿼리 입문

이벤트 등록 메서드

이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고,
이벤트 핸들러는 이벤트가 발생할 때 실행되는 코드를 말한다.

이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와
2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있다.

단독 이벤트 등록 메서드

예제 :

$(".btn1").click(function(){
   alert("welcome");
});

그룹 이벤트 등록 메서드

on() 메서드를 사용하여 이벤트를 등록한다.

예제 :

$(".btn1").on({
   "mouseover" : function(){
      console.log("welcome");
   },
   "focus" : function(){
      console.log("welcome");
   }
})

이벤트 등록 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
   $(".btn1").click(function(){
	   $(".btn1").parent().next()
	   .css({"color":"#f00"});
   });
   $(".btn2").on({
	   "mouseover focus" : function(){
		   $(".btn2").parent().next()
		   .css({"color":"#0f0"});
	   },
	   "mouseout blur" : function(){
		   $(".btn2").parent().next()
		   .css({"color":"#000"});
	   }
   })
});
</script>
</head>
<body>
	<p>
	<button class="btn1">버튼1</button>
	</p>
	<p>내용1</p>
	<p>
		<button class="btn2">버튼2</button>
	</p>
	<p>내용2</p>
</body>
</html>

결과 :

강제로 이벤트 발생시키기

단독 이벤트 등록 메서드를 사용하거나
trigger() 메서드를 사용하면 강제로 이벤트를 발생시킬 수 있다.

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
	$(".btn1").click(function(){
		$(".btn1").parent().next()
		.css({"color":"#f00"});
	})
	$(".btn2").on({
		"mouseover focus" : function(){
			$(".btn2").parent().next()
			.css({"color":"#0f0"});
		}
	})
	$(".btn1").click();
	$(".btn2").trigger("mouseover");
});
</script>
</head>
<body>
	<p>
	<button class="btn1">버튼1</button>
	</p>
	<p>내용1</p>
	<p>
		<button class="btn2">버튼2</button>
	</p>
	<p>내용2</p>
</body>
</html>

결과 :

이벤트 제거 메서드

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
	$(".btn1").click(function(){
		$(".btn1").parent().next()
		.css({"color":"#f00"});
	})
	$(".btn2").on({
		"mouseover focus" :function(){
			$(".btn2").parent().next()
			.css({"color":"#0f0"});
		}
	})
	$(".btn1").off("click")
	$(".btn2").off("mouseover focus")
});
</script>
</head>
<body>
	<p>
	<button class="btn1">버튼1</button>
	</p>
	<p>내용1</p>
	<p>
		<button class="btn2">버튼2</button>
	</p>
	<p>내용2</p>
</body>
</html>

ready() / load() 이벤트 메서드

ready() 는 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체 로딩이 끝나면 이벤트를 발생시킨다.
load() 는 외부에 연동된 소스의 로딩이 끝나면 이벤트를 발생시킨다.

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
	$(document).ready(function(){
		var h1 = $(".img1").height();
		console.log("ready :",h1);
	})
	$(window).load(function(){
		var h2 = $(".img1").height();
		console.log("load :",h2);
	})
});
</script>
</head>
<body>
	<p>
		<img src="http://place-hold.it/300X300" class="img1">
	</p>
</body>
</html>

결과 :

마우스 이벤트

click() /dblclick() 이벤트 메서드 / 이벤트 차단

예제 :

<!DOCTYPE html>
<html lang="ko">
<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":"#ff0"})
	})
	$(".btn2").on("click",function(e){
		$(".txt2").css({"background-color":"#0ff"})
	})
	$(".btn3").on("dblclick",function(){
		$(".txt3").css({"background-color":"#0f0"})
	})
});
</script>
</head>
<body>
	<p><a href="http://www.easyspub.co.kr/" class="btn1">버튼1</a></p>
	<p class="txt1">내용1</p>
	<p><a href="http://www.easyspub.co.kr/" class="btn2">버튼2</a></p>
	<p class="txt2">내용2</p>
	<p><button class="btn3">버튼3</button></p>
	<p class="txt3">내용3</p>
</body>
</html>

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

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function( ) {
	$(".btn1").on({
		"mouseover" : function(){
			$(".txt1").css({"background-color":"yellow"});
		},
		"mouseout" : function(){
			$(".txt1").css({"background":"none"});
		}
	})
	$(".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>
</html>

결과 :

mouseenter() / mouseleave() 이벤트 메서드

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function() {
	$("#box_1").on("mouseout",function(){
		$("#box_1").css({"background-color":"yellow"})
	});
	$("#box_2").on("mouseleave",function(){
		$("#box_2").css({"background-color":"pink"})
	});
});
</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>
</html>

결과 :

mousemove() 이벤트 메서드

예제 :

<!DOCTYPE html>
<html lang="ko">
<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>
</html>

결과 :

이벤트 객체와 종류

위에 script에 써져있는 것 처럼
ex:

$("이벤트 대상 선택").on("이벤트",function(e){
    e.속성;
});

저기 속성 에 담는것들

마우스 이벤트

clientX 마우스 포인터의 X좌표값 반환
clientY 마우스 포인터의 Y좌표값 반환
pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X좌표값을 반환
pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y좌표값을 반환
screenX 화면 모니터를 기준으로 마우스 포인터의 X좌표값을 반환
screenY 화면 모니터를 기준으로 마우스 포인터의 Y좌표값을 반환
button 마우스 버튼의 종류에 따라 값을 반환 (왼쪽 0, 휠 1, 오른쪽 2)

키보드 이벤트

keyCode 키보드의 아스키 코드값을 반환
altKey Alt가 눌러졌으면 true, 아니면 false
ctrlKey
shiftKey

전체 이벤트

target 이벤트가 전파된 마지막 요소를 가리킴
cancelBubble 이벤트 전파를 차단하는 속성. (기본값 false)
stopPropagation 이벤트의 전파를 차단
preventDefault 기본 이벤트 차단

scroll() 이벤트 메서드

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
	$(window).on("scroll",function(){
		var sc_top = $(this).scrollTop();
		var sc_left = $(this).scrollLeft();

		$(".top").text(sc_top);
		$(".left").text(sc_left);
	});
</script>
<style>
	body{
		height:10000px;
		width:5000px;
	}
	#wrap{
		position: fixed;
		left: 10px; top: 10px;
	}
</style>
</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>
</html>

결과 :

포커스 이벤트

포커스는 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성된다.

focus() / blur() / focusin() / focusout() 이벤트 메서드

예제 :

<!DOCTYPE html>
<html lang="ko">
<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"
		})
	})

	$("#frm_2").on("focusin",
	function(){
		$(this).css({
			"background-color":"pink"
		})
	})
	$("#frm_2").on("focusout",
	function(){
		$(this).css({
			"background-color":"#fff"
		})
	})
});
</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>

</html>

결과 :

키보드 접근성

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	$("#btn1")
	// data()메서드는 선택한 요소에 속성을 추가한다.
	.data({"text":"javascript"})
	.on({
		// 키보드 접근성 X
		"mouseover":overFnc,
		"mouseout":outFnc
	})
	$("#btn2")
	.data({"text":"welcome!"})
	.on({
		// 키보드 접근성 O
		"mouseover focus":overFnc,
		"mouseout blur":outFnc
	})

	function overFnc(){
		$(".txt").text($(this).data("text"));
	}
	function outFnc(){
		$(".txt").text("");
	}
});
</script>
</head>
<body>
	<p><button id="btn1">버튼1</button></p>
	<p><button id="btn2">버튼2</button></p>
	<p class="txt"></p>
</body>
</html>

결과 :

change() 이벤트 메서드

change() 이벤트 메서드는 선택한 폼 요소의 값을 새 값으로 바꾼다.
그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다.

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	$("#rel_site").on("change",function(){
		$(".txt").text($(this).val())
	})
})
</script>
</head>
<body>
<select id="rel_site">
		<option value="">사이트 선택</option>
		<option value="www.google.com">구글</option>
		<option value="www.naver.com">네이버</option>
		<option value="www.daum.net">다음</option>
</select>
<p class="txt"></p>
</body>
</html>

결과 :

keydown() / keyup() / keypress() 이벤트 메서드

keydown() 은 모든 키에 대해 이벤트를 발생시킨다.
keypress() 는 기능키에 대해서는 이벤트를 발생시키지 않는다.
keyup() 은 키를 눌렀다가 손을 떼면 이벤트를 발생시키거나 keyup 이벤트를 강제로 발생시킨다.

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	$(document).on("keydown",keyEventFnc);

	function keyEventFnc(e){
		var direct ="";
		switch(e.keyCode){
			case 37:
				direct="Left";
				break;
			case 38:
				direct="Top";
				break;
			case 39:
				direct="Right";
				break;
			case 40:
				direct="Bottom";
				break;
		}
		if(direct)$("#user_id").val(direct);
	}
});
</script>
</head>
<body>
	<p><input type="text" name="user_id" id="user_id"></p>
</body>
</html>

결과 :

$(this) 선택자, index() 인덱스 반환 메서드

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	$(".menuWrap_1 a").on("click",function(e){
		e.preventDefault();
		$(".menuWrap_1 a").css({
			"background-color":"#fff"
		})
		$(this).css({
			"background-color":"#ff0"
		})
	})

	$(".menuWrap_2 a").on("click",function(e){
		e.preventDefault();
		$(".menuWrap_2 a").css({
			"background-color":"#fff"
		})
		var idx = $(".menuWrap_2 a").index(this);
		$(".menuWrap_2 a").eq(idx).css({
			"background-color":"#0ff"
		})
		$(".idxNum").text(idx);
	})
});
</script>
</head>
<body>
<h2>$(this)</h2>
<ul class="menuWrap_1">
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
</ul>
<h2>Index( )</h2>   
<ul class="menuWrap_2">
				<li><a href="#">메뉴4</a></li>
				<li><a href="#">메뉴5</a></li>
				<li><a href="#">메뉴6</a></li>
</ul>
<p class="idxNum"></p>
</body>
</html>

결과 :

그룹 이벤트 등록 메서드

on() 메서드

앞에서 배운 on() 메서드의 등록 방식은 '라이브 이벤트 등록 방식'이 아니다. 즉 이벤트를 등록한 다음에 새롭게 형성되거나 복제된 요소에는 이벤트를 등록할 수 없다.

예제 :

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
	// 이벤트를 등록하고 class 값을 생성하면 이벤트가 정상적으로 등록되지 않음
	$(".btn_1").on("mouseover focus",function(){
		alert("HELLO!");
	})
	$(".btn_1").addClass("on");
	
	// 라이브 이벤트 등록 방식으로 이벤트 등록한 다음 class값을 생성하면 이벤트가 정상적으로 등록됨
	$(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>
</html>

delegate() / one() 이벤트 등록 메서드

delegate() 이벤트 등록 메서드는 선택한 요소 하위 요소에 이벤트를 등록한다. 그리고 이벤트를 등록한 이후에도 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.
one() 이벤트 등록 메서드는 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거된다.

이벤트 제거 메서드

off() on() 메서드로 등록한 이벤트 제거
unbind() bind() 메서드로 등록한 이벤트 제거
undelegate() delegate() 메서드로 등록한 이벤트 제거

예제 :

<!DOCTYPE html>
<html lang="ko">
<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>
</html>

결과 :

Hyeonu_J

흔한 컴공러 / 3학년

이전 포스트

[TIL] 제이쿼리 (jQuery) 선택자

다음 포스트

[TIL] 제이쿼리 - 이벤트 메서드

이벤트 등록 메서드

단독 이벤트 등록 메서드

그룹 이벤트 등록 메서드

이벤트 등록 예제

강제로 이벤트 발생시키기

이벤트 제거 메서드

ready() / load() 이벤트 메서드

마우스 이벤트

click() /dblclick() 이벤트 메서드 / 이벤트 차단

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

mouseenter() / mouseleave() 이벤트 메서드

mousemove() 이벤트 메서드

이벤트 객체와 종류

마우스 이벤트

키보드 이벤트

전체 이벤트

scroll() 이벤트 메서드

포커스 이벤트

focus() / blur() / focusin() / focusout() 이벤트 메서드

키보드 접근성

change() 이벤트 메서드

keydown() / keyup() / keypress() 이벤트 메서드

$(this) 선택자, index() 인덱스 반환 메서드

그룹 이벤트 등록 메서드

on() 메서드

delegate() / one() 이벤트 등록 메서드

이벤트 제거 메서드

[TIL] 제이쿼리 (jQuery) 선택자

[TIL] 제이쿼리 - 효과 및 에니메이션 메서드

0개의 댓글