코밍이의 하루

[JQuery] 이벤트 메소드 본문

웹언어 공부/JQuery

[JQuery] 이벤트 메소드

코밍이 2021. 8. 19. 23:48

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3, JS, jQuery
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

2. 주요 문법

1) 이벤트 등록 메소드
- 이벤트 : 사이트에서 방문자가 취하는 모든 행위

- 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 코드

- 종류 : 단독 이벤트 등록 메소드 , 그룹 이벤트 등록 메소드

기본형 설명
<button id="btn">버튼</button>

$("#btn").click(function(){
  자바스크립트 코드;
});		 ① $("#btn") 이벤트 대상

② click() 이벤트 등록 메소드

③ function(){...} 이벤트 핸들러

- 이벤트 등록 메소드의 종류

구분 종류 설명
로딩
이벤트		 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생
ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생
error() 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생
마우스
이벤트		 click() 선택한 요소를 클릭했을 때 이벤트가 발생
dbclick() 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트가 발생
mouseout() - 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생
- 이때 하위 요소의 영향을 받음
mouseover() 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생
hover() 선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생
mousedown() 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생
mouseup() 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생
mouseenter() 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생
mouseleave() 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생
mousemove() 선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생
scroll() 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생
포커스
이벤트		 focus() 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스 생성
focusin() 선택한 요소에 포커스가 생성되었을 때 이벤트 발생
focusout() 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생
blur() 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 함
change() - 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트 발생
- 강제로 chage 이벤트를 발생시킬 때도 사용 
키보드
이벤트		 keypress() - 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생
- 문자 키를 제외한 키의 코드값 반환
keydown() - 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생
- 키보드의 모든 키의 코드값 반환
keyup() 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생

 

2) 단독 이벤트 등록 메소드

- 대상에 한 가지 동작에 대한 이벤트만 등록

기본형 예제
$("이벤트 대상 선택").이벤트 등록 메소드(function(){
  자바스크립트 코드;
});		 <button class="btn1">버튼</button>
$(".btn1").click(function(){
  alert("welcome");
});

3) 그룹 이벤트 등록 메소드

- 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있음.

- on() 메소드를 사용하여 이벤트 등록

- on() 메소드 등록 방식

기본형 예제
$("이벤트 대상 선택").on("이벤트 종류1 ... 이벤트 종류n",
function() {
  자바스크립트 코드;
});		 <button class="btn1">버튼</button>
$(".btn1").on("mouseover focus", function(){
  console.log("welcome");
});
$("이벤트 대상 선택").on({
  "이벤트 종류1 ... 이벤트 종류n" : function() {
    자바스크립트 코드;
  }
});		 <button class="btn1">버튼</button>
$(".btn1").on({
  "mouseover focus" : function(){
    console.log("welcome");
  }
});
$("이벤트 대상 선택").on({
  "이벤트 종류1" : function() { 자바스크립트 코드1; },
  ...
  "이벤트 종류n" : function() { 자바스크립트 코드n; }
});		 <button class="btn1">버튼</button>
$(".btn1").on({
  "mouseover" : function(){
    console.log("welcome");
  },
  "focus" : function() {
    console.log("welcome");
  }
});

4) 강제로 이벤트 발생시키기

기본형
$("이벤트 대상").단독 이벤트 등록 메소드();
$("이벤트 대상").trigger("이벤트 종류");

 

5) 이벤트 제거 메소드

기본형
$("이벤트 대상").off("제거할 이벤트 종류");

 

6) 로딩 이벤트 메소드

- 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러 실행

- 종류 : ready(), load()

기본형
$(document).ready(fucntion() { 자바스크립트 코드; });
$(document).on("ready",fucntion() { 자바스크립트 코드; });
$(window).load(fucntion() { 자바스크립트 코드; });
$(window).on("load",fucntion() { 자바스크립트 코드; });

3. 소스 코드 및 실행 결과

- jq_event1_1_test.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"});
					},
					"mouseover 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>

 

jq_event1_1_test.html

- jq_event1_2_test.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").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>

jq_event1_2_test.html

- jq_event1_3_test.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(){
						$(".btn").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>

jq_event1_3_test.html

- jq_event1_4_test.html

<!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>

jq_event1_4_test.html

 

저작자표시 비영리 변경금지 (새창열림)

'웹언어 공부 > JQuery' 카테고리의 다른 글

[JQuery] 이벤트 객체와 종류  (0) 2021.08.20
[JQuery] 마우스 이벤트  (0) 2021.08.20
[JQuery] 객체 조작 메소드 - 객체 편집 메소드  (0) 2021.08.18
[JQuery] 객체 조작 메소드 - 수치 조작 메소드  (0) 2021.08.18
[JQuery] 객체 조작 메소드 - 속성 조작 메소드  (0) 2021.08.18
'웹언어 공부/JQuery' Related Articles more