본문 바로가기
학원/복기

[jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트

조가루 2023. 6. 14. 00:18

마우스 이벤트

 

1) click : 태그에서 마우스 버튼을 누른 경우 발생하는 이벤트 
2) dbclick : 태그에서 마우스 버튼을 두번 연속 누른 경우 발생하는 이벤트
3) mousedown : 태그에서 마우스 버튼을 누르는 순간 발생되는 이벤트 
4) mouseup : 태그에서 눌려진 마우스 버튼을 놓는 순간 발생되는 이벤트 
5) mouseover : 태그에 마우스 커서가 진입하는 순간 발생되는 이벤트 → 버블링 단계 포함(자식 태그 포함해서 이벤트 발생한다.)
6) mouseout : 태그에서 마우스 커서가 벗어나는 순간 발생되는 이벤트 → 버블링 단계 포함(자식 태그 포함해서 이벤트 발생한다.)
7) mouseenter : 태그에서 마우스 커서가 진입하는 순간 발생되는 이벤트 → 버블링 단계 미포함
8) mouseleave : 태그에서 마우스 커서가 벗어나는 순간 발생되는 이벤트 → 버블링 단계 미포함
9) mousewheel : 태그에서 마우스 휠이 움직이는 동안 발생되는 이벤트 

10) mousemove : 브라우저에서 마우스 휠이 움직이는 동안 발생되는 이벤트

11) contextmenu : 브라우저에서 마우스 오른쪽 버튼을 누르면 발생되는 이벤트 

 

예시)

 

[html 태그]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
div {
	font-size: 1.5em;
	margin: 10px;
	width: 200px;
}

.mystyle {
	border: 2px solid red;
	background: yellow; 
}
</style>
</head>
<body>
	<h1>Mouse Event</h1>
	<hr>
	<div>마우스 이벤트-1</div>
	<div>마우스 이벤트-2</div>
	<div>마우스 이벤트-3</div>
	<div>마우스 이벤트-4</div>
	<div>마우스 이벤트-5</div>
</body>
</html>


$(selector).addClass(name) : 선택자로 검색된 태그에 class 속성값을 추가하는 메소드 
$(selector).removeClass(name) : 선택자로 검색된 태그에 class 속성값을 삭제하는 메소드 

 

$("div").click(function() {
	if($(this).attr("class")!="mystyle") {
			$(this).addClass("mystyle");	
	} else {
			$(this).removeClass("mystyle");	
	} 
});

toggleClass 메소드를 이용해 더 쉽게 코드를 짤 수 있다.

$(selector).toggleClass(name) : 선택자로 검색된 태그에 class 속성값을 추가 또는 삭제하는 메소드

 

$("div").click(function() {
	$(this).toggleClass("mystyle");
});

더블 클릭하면 실행되도록 코드 작성

$("div").dblclick(function() {
	$(this).toggleClass("mystyle");
});

mouseover : 태그에 마우스 커서가 진입하는 순간 발생되는 이벤트 

mouseout : 태그에서 마우스 커서가 벗어나는 순간 발생되는 이벤트

 

태그에서 벗어나고, 진입할 때 이벤트가 발생한다.

$("div").mouseover(function() {
	$(this).toggleClass("mystyle");
});
	
$("div").mouseout(function() {
	$(this).toggleClass("mystyle");
});

위 코드를 hover 메소드로 표현 할 수 있다.

 

hover : 태그에 마우스 커서가 진입하거나 벗어나는 순간 발생되는 이벤트

$("div").hover(function() {//mouseover 이벤트가 발생된 경우 처리될 명령 작성
	$(this).toggleClass("mystyle");
}, function() {//mouseout 이벤트가 발생된 경우 처리될 명령 작성
	$(this).toggleClass("mystyle");
});

브라우저에서 마우스 오른쪽 버튼을 누른 경우 호출될 이벤트 처리 함수 등록

 

oncontextmenu 이벤트 : 웹 페이지에서 마우스 오른쪽 버튼을 클릭했을 때 발생하는 이벤트이다. 이벤트가 발생하면 브라우저는 기본 동작으로서 컨텍스트 메뉴(맥 OS에서는 팝업 메뉴)를 표시한다.

document.oncontextmenu=function() {
	alert("마우스 오른쪽 버튼 사용 금지");
	return false;
}

Key Event

 

1) keydown : 태그에서 키보드를 누른 순간 발생되는 이벤트 - 모든 키에 대해 동작
2) keypress : 태그에서 키보드를 누른 순간 발생되는 이벤트 
  - 문자키와 [Enter],[Space],[Esc]에 대해 동작한다.
  - keyCode를 제공한다. (어떤 키보드의 키를 눌렀는지 구분할 수 있는 값을 제공) 
3) keyup : 태그에서 키보드를 놓는 순간 발생되는 이벤트
  - keyCode를 제공한다. (어떤 키보드의 키를 눌렀는지 구분할 수 있는 값을 제공) 

 

예시

 

[html 태그]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>Key Event</h1>
	<hr>
	<form method="post" name="loginForm" id="loginFomr">
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id" id="id"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="passwd" id="passwd"></td>
		</tr>
		<tr>
			<td colspan="2"><button type="button" id="loginBtn">로그인</button></td>
		</tr>
	</table>
	</form>
	<hr>
	<div>현재 입력된 글자수  : <span id="count">0</span></div>
	<textarea rows="7" cols="80" id="content"></textarea>
</body>
</html>

자바스크립트에서 form 태그와 입력태그(input, select, tetxarea)의 name 속성값을 Node(Element) 객체로 표현하여 사용할 수 있다.

loginForm.id.focus();//입력태그에 입력촛점(커서) 제공

 

이를 제이쿼리를 이용해 더 간단하게 표현이 가능하다.

$("#id").focus();//입력태그에 입력촛점(커서) 제공

입력값 검증

 

$(selector).val() : 선택자로 검색된 태그(입력태그)의 입력값을 반환하는 메소드 

 

$(selector).submit() : 선택자로 검색된 태그(Form 태그)로 제출 이벤트를 발생시키는 메소드 
→ 제출이벤트(Submit Event)가 발생되면 Form 태그가 실행되어 웹프로그램을 요청할 수 있다. 

 

$("#loginBtn").click(function() {
            
	if($("#id").val()=="") {
		alert("아이디를 입력해 주세요.");
		$("#id").focus();
		return;
	}
            
	if($("#passwd").val()=="") {
		alert("비밀번호를 입력해 주세요.");
		$("#passwd").focus();
		return;
	}
    
    	//제출 이벤트 발생
	$("#loginForm").submit();
});

event.keyCode : 이벤트가 발생된 키보드의 키를 구분하기 위한 값이 저장된 프로퍼티

 

선택자로 검색된 입력태그에서 키보드의 키를 누르는 이벤트가 발생될 경우 콜백함수를 호출

$("#id").keypress(function() {
	if(event.keyCode==13) {//이벤트가 발생된 키가 [Enter]인 경우 
		$("#passwd").focus();
	}
});
	

$("#passwd").keypress(function() {
	if(event.keyCode==13) {//이벤트가 발생된 키가 [Enter]인 경우 
		$("#loginForm").submit();
	}
});
$("#content").keyup(function() {
	//입력태그의 입력된 문자 갯수를 제공받아 변수에 저장 
	var count=$(this).val().length;
		
	$("#count").text(count);
});

#content 요소에 텍스트를 입력할 때마다 입력된 문자의 갯수가 실시간으로 #count 요소에 표시된다.

 

 

Scroll Event

 

[html 태그]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>Scroll Event</h1>
	<hr>
	<div id="displayDiv"></div>
</body>
</html>

0.png~9.png 까지의 이미지 출력 

function displayImage() {
	for(i=0;i<=9;i++) {
		$("#displayDiv").append("<div><img src='images/"+i+".png' width='100'></div>");
	}
}
displayImage();

$(selector).scroll(callback) 
: 선택자로 검색된 태그(window 객체 - 브라우저)에서 스크롤을 움직이는 순간 이벤트가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드

 

$(selector).height() : 선택자로 검색된 태그의 높이를 반환하는 메소드

$(selector).scrollTop() : 선택자로 검색된 태그(브라우저)의 스크롤 상단 위치값을 반환하는 메소드
→  $(window).scrollTop() : 브라우저에서 보이지 않는 document 객체의 높이

 

 

스크롤 이벤트를 감지하여 문서의 마지막에 도달하면 추가 이미지가 동적으로 생성되는 동작을 구현하는 코드 

$(window).scroll(function() {	
	var docH=$(document).height();//document 객체의 높이를 반환받아 변수에 저장

	var scrollH=$(window).height()+$(window).scrollTop();
		
	if(scrollH >= docH) {//스크롤이 document 객체의 마지막에 위치한 경우
		displayImage();
	}
});

 

 

저작자표시 비영리 변경금지

'학원 > 복기' 카테고리의 다른 글

[jQuery] checkbox 이벤트  (0) 2023.06.14
[jQuery] Form 이벤트 / Submit 이벤트  (0) 2023.06.14
[jQuery] Event Handle  (0) 2023.06.13
[jQuery] 태그의 추가와 삭제 / 이동  (0) 2023.06.12
[jQuery] 메소드 (each, css, text, html)  (0) 2023.06.12

'학원/복기' Related Articles

티스토리툴바