[JS + jquery] 제이쿼리 κ·Έλ£Ή 이벀트 등둝 및 μ‚­μ œ (on(), delegate(), bind(), one(), off(), unbind(), undelegate())

2021. 10. 29. 17:30ㆍHTML + CSS + JS/JS μžλ°”μŠ€ν¬λ¦½νŠΈ

728x90

 

1. κ·Έλ£Ή 이벀트 등둝 λ©”μ„œλ“œ 

κ·Έλ£Ή 이벀트 등둝 λ©”μ„œλ“œλŠ” μ‚¬μš©ν•˜λ©΄ ν•œ λ²ˆμ— 2개 μ΄μƒμ˜ 이벀트λ₯Ό 등둝할 수 μžˆλ‹€. 

 

on() 이벀트 λŒ€μƒ μš”μ†Œμ— 2개 μ΄μƒμ˜ 이벀트λ₯Ό λ“±λ‘ν•œλ‹€. μ‚¬μš© 방식에 따라 이벀트λ₯Ό λ“±λ‘ν•œ 이후에도 λ™μ μœΌλ‘œ μƒμ„±λ˜κ±°λ‚˜ 볡제된 μš”μ†Œμ—λ„ μ΄λ²€νŠΈκ°€ μ μš©λœλ‹€. 

bind() 이벀트 λŒ€μƒ μš”μ†Œμ— 2개 μ΄μƒμ˜ 이벀트λ₯Ό λ“±λ‘ν•œλ‹€. 

delegate() μ„ νƒν•œ μš”μ†Œμ˜ ν•˜μœ„ μš”μ†Œμ— 이벀트λ₯Ό λ“±λ‘ν•œλ‹€. 이벀트λ₯Ό λ“±λ‘ν•œ 이후에도 λ™μ μœΌλ‘œ μƒμ„±λ˜κ±°λ‚˜ 볡제된 μš”μ†Œμ—λ„ μ΄λ²€νŠΈκ°€ μ μš©λœλ‹€. 

one() μ΄λ²€νŠΈ λŒ€μƒ μš”μ†Œμ— 1개 μ΄μƒμ˜ 이벀트λ₯Ό λ“±λ‘ν•œλ‹€. μ§€μ •ν•œ μ΄λ²€νŠΈκ°€ 1회 λ°œμƒν•˜κ³  μžλ™μœΌλ‘œ ν•΄μ œλœλ‹€. 

 

 

1️⃣ on() λ©”μ„œλ“œ 

on() λ©”μ„œλ“œλŠ” μ„ νƒν•œ μš”μ†Œμ— 이벀트λ₯Ό λ“±λ‘ν•œ 이후에도 μƒˆλ‘­κ²Œ μƒμ„±λ˜κ±°λ‚˜ 볡제된 μš”μ†Œμ— 이벀트λ₯Ό μ μš©ν•  수 μžˆλ‹€. 

(λ™μ μœΌλ‘œ μƒμ„±λ˜κ±°λ‚˜ 볡제된 μš”μ†Œμ—λ„ μ΄λ²€νŠΈκ°€ λ“±λ‘λœλ‹€.!)

$([document | "이벀트 λŒ€μƒμ˜ μƒμœ„ μš”μ†Œ 선택"]).on("이벀트 μ’…λ₯˜", "이벀트 λŒ€μƒ 선택", function() {

  μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œ;

});

μœ„μ—λŠ” λ™μ μœΌλ‘œ μƒμ„±λœ μš”μ†Œμ— 이벀트 등둝 μ•ˆλœλ‹€. 

 

 

2️⃣ delegate() / one() 이벀트 등둝 λ©”μ„œλ“œ 

delegate() 이벀트 등둝 λ©”μ„œλ“œλŠ” μ„ νƒν•œ μš”μ†Œμ˜ ν•˜μœ„ μš”μ†Œμ— 이벀트λ₯Ό λ“±λ‘ν•œλ‹€. 

그리고 이벀트λ₯Ό λ“±λ‘ν•œ 이후에도 λ™μ μœΌλ‘œ μƒμ„±λœ μš”μ†Œμ™€ 볡제된 μš”μ†Œμ—λ„ 이벀트λ₯Ό λ“±λ‘ν•œλ‹€. 

$([document | "이벀트 λŒ€μƒμ˜ μƒμœ„ μš”μ†Œ 선택"]).delegate("이벀트 μ’…λ₯˜", "이벀트 λŒ€μƒ 선택", function() {

  μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œ;

});

 

one() 이벀트 등둝 λ©”μ„œλ“œλŠ” μ΄λ²€νŠΈκ°€ 1회 λ°œμƒν•˜λ©΄ μžλ™μœΌλ‘œ λ“±λ‘λœ μ΄λ²€νŠΈκ°€ μ œκ±°λœλ‹€. 

(μΌνšŒμ„± 이벀트λ₯Ό 등둝할 λ•Œ μ‚¬μš©ν•œλ‹€.)

btn_2의 λ²„νŠΌμ€ ν•œλ²ˆ welcome alert ν›„ λ‹€μ‹œ λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€. 

 

 

2. 이벀트 제거 λ©”μ„œλ“œ 

이벀트 제거 λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ 이전에 λ“±λ‘λœ 이벀트λ₯Ό μ œκ±°ν•  수 μžˆλ‹€.

 

off() on() λ©”μ„œλ“œλ‘œ λ“±λ‘ν•œ 이벀트λ₯Ό μ œκ±°ν•œλ‹€. 

unbind() bind() λ©”μ„œλ“œλ‘œ λ“±λ‘ν•œ 이벀트λ₯Ό μ œκ±°ν•œλ‹€. 

undelegate()  delegate() λ©”μ„œλ“œλ‘œ λ“±λ‘ν•œ 이벀트λ₯Ό μ œκ±°ν•œλ‹€. 

 

- κΈ°λ³Έ 이벀트 제거 방식 

$("이벀트 λŒ€μƒ μš”μ†Œ 선택").off("이벀트 μ’…λ₯˜");

 

- 라이브 이벀트 제거 방식 

$([document  | "이벀트 λŒ€μƒ μƒμœ„ μš”μ†Œ 선택"]).off("이벀트 μ’…λ₯˜" , "이벀트 λŒ€μƒ μš”μ†Œ 선택");

 

$("이벀트 λŒ€μƒ μš”μ†Œ 선택").unbind("이벀틑 μ’…λ₯˜");

 

- κΈ°λ³Έ 이벀트 제거 방식

$("이벀트 λŒ€μƒ μš”μ†Œ 선택").delegate("이벀트 μ’…λ₯˜");

 

- 라이브 이벀트 제거 방식 

$([document  | "이벀트 λŒ€μƒ μƒμœ„ μš”μ†Œ 선택"]).delegate("이벀트 μ’…λ₯˜" , "이벀트 λŒ€μƒ μš”μ†Œ 선택");

 

 

 

* μ—°μŠ΅λ¬Έμ œ 

κΈ€μžλ₯Ό ν™•λŒ€ν•˜κ³  μΆ•μ†Œν•˜λŠ” λ²„νŠΌ 

κΈ°λ³Έ
ν™•λŒ€
μΆ•μ†Œ 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벀트 </title>  
<style>
	body{font: 14px Malgun Gothic, "맑은고딕",sans-serif;}
	.zoomBtnZone{font-size: 14px;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
	var baseFontSize = 14;
	$(".zoomBtnZone button").on("click",zoomInOut);

	function zoomInOut() {
		if($(this).hasClass("zoomOutBtn")) {
			if(baseFontSize <= 8) return false;
			baseFontSize--;
		}else if($(this).hasClass("zoomInBtn")) {
			if(baseFontSize >= 20) return false;
			baseFontSize++;
		}else{
			baseFontSize = 14;
		}

		$(".fontSize").text(baseFontSize+"px");
		$("body").css({fontSize:baseFontSize  + "px"});
	}

});
</script>
</head>
<body>
	<p class="zoomBtnZone">
		<button class="zoomOutBtn">-</button>
		<button class="originBtn">100%</button>
		<button class="zoomInBtn">+</button>
	</p>
	<p class="fontSize">14px</p>
	<div id="wrap">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat consectetur nibh, ut luctus urna placerat non. Phasellus consectetur nunc nec mi feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum ipsum quis feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat sem sit amet ullamcorper sodales.
	</div>
</body>
</html>

 

 

* μ—°μŠ΅λ¬Έμ œ 2

mouseover ν•˜λ©΄ 배경색 μ±„μ›Œμ§€κ²Œ!

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벀트</title>
<style>
	*{margin:0;padding:0;box-sizing:border-box;}
	body{padding:20px;}
	li{list-style:none;}
	a{text-decoration: none;color: #000;}
	.gnb{width:400px;text-align: center;overflow: hidden;}
	.gnb li{width:25%;float: left;padding:5px;}
	.gnb li a{border: 1px solid #000;display: block;padding:5px 0;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function() {
	var beforeMenu = null;
	$(".gnb  > li > a").on("mouseover focus", function() {
		if(beforeMenu) beforeMenu.css({background:"none"});
		$(this).css({"background-color":"#0ff"});
		beforeMenu = $(this);
	});
	$(".gnb").on("mouseleave", function() {
		if(beforeMenu) beforeMenu.css({background:"none"});
	});
});
</script>
</head>
<body>
	<ul class="gnb">
		<li><a href="#">menu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
		<li><a href="#">menu4</a></li>
	</ul>
</body>
</html>
728x90

'HTML + CSS + JS > JS μžλ°”μŠ€ν¬λ¦½νŠΈ' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[JS + jquery] μ• λ‹ˆλ©”μ΄μ…˜ 효과 μ œμ–΄ λ©”μ„œλ“œ (queue(), dequeue(), stop(), clearQueue(), finish(), delay() )  (0) 2021.11.01
[JS + jquery] 효과 λ©”μ„œλ“œμ™€ μ• λ‹ˆλ©”μ΄μ…˜ λ©”μ„œλ“œ  (0) 2021.11.01
[JS + jquery] 제이쿼리 이벀트 객체와 μ’…λ₯˜, 포컀슀 이벀트, ν‚€λ³΄λ“œ 이벀트 (scroll(), focus(), blur(), focusin(), focusout(), change(), keydown(), keyup(), keypress(), $(this), index())  (0) 2021.10.29
[JS + jquery] 제이쿼리 마우슀 이벀트 λ©”μ„œλ“œ ( click(), dblclick(), mouseover(), mouseout(), hover(), mouseenter(), mouseleave(), mousemove())  (0) 2021.10.29
[JS + jquery] 제이쿼리 이벀트 등둝 λ©”μ„œλ“œ (λ‘œλ”© 이벀트, 마우슀 이벀트, 포컀슀 이벀트, ν‚€λ³΄λ“œ 이벀트)  (0) 2021.10.29

κ΄€λ ¨κΈ€

λŒ“κΈ€ 0

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”