본문 바로가기
JS 프레임워크/jQuery

[jQuery] 이벤트

by 두리두리안 2021. 4. 13.

이벤트 연결 기본

이름 설명
on() 이벤트를 연결

메서드 두가지 형태

$(selector).on(evnetName, function(event){})

$(selector).on(object)

 

예제1 

<!-- on 이벤트 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script >
	$(document).ready(function (){
		//이벤트를 연결
		$('h1').on('click', function (){
			$(this).html(function (index, html){
				return html + '*';
			})
		})
	})
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

결과 

on메서드의 첫번째 매개변수에 이벤트 이름을 입력하고 두 번째 매개변수에 이벤트 리스너를 입력 

예제2

<!-- on 이벤트 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script >
	$(document).ready(function (){
		//이벤트를 연결
		$('h1').on('click', function (){
			$(this).html(function (index, html){
				return html + '*';
			})
		})
		$('h1').on({
			mouseenter : function (){ $(this).addClass('reverse'); },
			mouseleave : function (){ $(this).removeClass('reverse');}
		})
	})
</script>
<style>
	.reverse{
		background: black;
		color: white;
	}
</style>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

  1. mouseenter : function (){ $(this).addClass('reverse'); },
  2. mouseleave : function (){ $(this).removeClass('reverse');}

 

reverse 클래스 속성을 추가하고, 마우스가 빠져나가면 reverse 클래스 속성을 제거

이벤트 연결 제거

이름  설명
off() 이벤트 제거

 

  1. $(selector).offf()
  2. $(selector).offf(eventName)
  3. $(selector).offf(eventName, function)

1번은 해당 문서 객체와 관련된 모든 이벤트 제거

2번은 해당 문서 객체의 특정 이벤트와 관련된 모든 이벤트 제거

3번은 특정 이벤트  리스너 제거

 

<!-- on 이벤트 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script >
	$(document).ready(function (){
		//이벤트를 연결
		$('h1').on('click', function (){
			$(this).html(function (index, html){
				return html + '*';
			})
		})
	})
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

클릭하면 이벤트가 발생한다. 

<!-- on 이벤트 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script >
	$(document).ready(function (){
		//이벤트를 연결
		$('h1').on('click', function (){
			$(this).html(function (index, html){
				return html + '*';
			})
		})
		$('h1').on({
			mouseenter : function (){ $(this).addClass('reverse'); },
			mouseleave : function (){ $(this).removeClass('reverse');}
		})
	})
</script>
<style>
	.reverse{
		background: black;
		color: white;
	}
</style>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

<!-- 이벤트 off -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
	$(document).ready(function (){
		//이벤트 연결
		$('h1').click(function (){
		//출력
		$(this).html('CLICK');
		alert('이벤트 발생 합니다.');
		
		//이벤트 제거
		$(this).off();
		})
	})
</script>
</head>
<body>
	<h1>Header-01</h1>
	<h1>Header-02</h1>
	<h1>Header-03</h1>
</body>
</html>

매개변수 context

매개변수를 두개 입력할 수 도 있다.

context는 selector가 적용하는 범위를 한정한다. 

<!-- 이벤트 매개변수 context -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
	$(document).ready(function (){
		//이벤트 연결
		$('div').click(function (){
			//변수 선언
			var header = $('h1',this).text();
			var Paragraph = $('p',this).text();
			
			//출력
			alert(header +'\n'+Paragraph);
		})
	})
</script>
<style>
	* { margin: 0px; padding: 0px};
		div{
			margin : 5px; padding: 3px;
			border : 3px; soild black;
			border-radius: 10px;
		}
</style>
</head>
<body>
	<div>
		<h1>Header 1</h1>
		<p>Paragraph</p>
	</div>
		<div>
		<h1>Header 2</h1>
		<p>Paragraph</p>
	</div>
		<div>
		<h1>Header 3</h1>
		<p>Paragraph</p>
	</div>
</body>
</html>

이벤트 강제 발생

이름 설명
trigger() 이벤트를 강제로 발생 
<!-- 이벤트 강제 발생 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
	$(document).ready(function (){
		//이벤트 연결
		$('h1').click(function (){
			$(this).html(function (index, html){
				return html +"*";
			})
		})
		//1초마다 함수를 실행
		setInterval(function (){
			$('h1').last().trigger('click');
		},1000)
	})
</script>
</head>
<body>
	<h1>Start: </h1>
	<h1>Start: </h1>
</body>
</html>

기본 이벤트와 이벤트 전달 

이름 설명
preventDefault() 기본 이벤트를 제거
stopPropagation() 이벤트 전달을 제거  
<!-- 기본 이벤트와 이벤트 전달 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function (){
		$('a').click(function (evnet){
			$(this).css('background-color', 'blue');
			event.preventDefault();
		});
		
		$('h1').click(function (){
			$(this).css('background-color', 'red');
		})
	})
</script>

<style>
* {
	margin: 5px;
	padding: 5px;
	border: 3px;
	solid
	black;
}
</style>
</head>
<body>
	<h1>
		<a href="https://duridan-program.tistory.com/">두리안</a>
	</h1>
</body>
</html>

<!-- 기본 이벤트와 이벤트 전달 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>

<script>
	$(document).ready(function() {
		$('a').click(function(evnet) {
			$(this).css('background-color', 'blue');
			event.stopPropagation();
			event.preventDefault();
		});
	})
</script>
<style>
* {
	margin: 5px;
	padding: 5px;
	border: 3px;
	solid
	black;
}
</style>
</head>
<body>
	<h1>
		<a href="https://duridan-program.tistory.com/">두리안</a>
	</h1>
</body>
</html>

이벤트 연결 범위 한정

on()메서드는  selector 매개변수로 이벤트 범위를 한정

이렇게 범위 한정하는 이벤트 연결 방식을 delegate방식 이라고 한다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function (){
		$('h1').on('click', function (){
			var length = $('h1').length;
			var targetHTML = $(this).html();
			$('#wrap').append('<h1>' + length + ' - ' +targetHTML +'</h1>');
		})
	})
</script>
</head>
<body>
	<div id="wrap">
		<h1>Header</h1>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function (){
		$('#wrap').on('click', 'h1' ,function (){
			var length = $('h1').length;
			var targetHTML = $(this).html();
			$('#wrap').append('<h1>' + length + ' - ' +targetHTML +'</h1>');
		})
	})
</script>
</head>
<body>
	<div id="wrap">
		<h1>Header</h1>
	</div>
</body>
</html>

'JS 프레임워크 > jQuery' 카테고리의 다른 글

[jQuery] 이미지 슬라이더  (0) 2021.04.14
[jQuery] 효과  (0) 2021.04.14
[jQuery] 문서 객체  (0) 2021.04.10
[jQuery] 문서 객체 선택과 탐색  (0) 2021.04.10
[jQuery] 기본 선택자  (0) 2021.04.10

관련글

티스토리툴바