[jQuery 2-4] Mouse Event

임승현·2022년 11월 25일

jQuery

목록 보기

7/12

🐧Mouse Event

◈ click : 태그에서 마우스 버튼을 누른 경우 발생되는 이벤트
◈ dblclick : 태그에서 마우스 버튼을 두번 연속 누른 경우 발생되는 이벤트
◈ mouseenter : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생
◈ mouseleave : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생
◈ mouseover : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생
◈ mouseout : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생
◈ hover : 마우스 커서가 태그에 진입하거나 벗어난 경우 발생되는 이벤트

🥎click

📌$(selector).addClass(name) : 선택자로 검색된 태그에 class 속성값을 추가하는 메소드
$(this).addClass("mystyle");
📌$(selector).removeClass(name) : 선택자로 검색된 태그의 class 속성값을 제거하는 메소드
$(this).removeClass("mystyle");
📌$(selector).toggleClass(name) : 선택자로 검색된 태그의 class 속성값이 없으면 추가하고 class 속성값이 있는면 제거하는 메소드
$(this).toggleClass("mystyle");

🥎dblclick

📍dblclick

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

🥎mouseenter·mouseleave

📍mouseenter

📍mouseleave

$("span").mouseenter(function() {
	$(this).addClass("mystyle");
});
$("span").mouseleave(function() {
	$(this).removeClass("mystyle");
});

🥎mouseover·mouseout

📍mouseover

📍mouseout

$("span").mouseover(function() {
	$(this).addClass("mystyle");
});
$("span").mouseout(function() {
	$(this).removeClass("mystyle");
});

🥎hover

📍hover

$("span").hover(function() {//태그에 진입한 경우 호출되는 콜백함수
	$(this).addClass("mystyle");
}, function() {//태그에 벗어난 경우 호출되는 콜백함수
	$(this).removeClass("mystyle");
});

📃17_mouse_event.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
div {
	font-size: 1.5em;
	margin: 10px;
	width: 200px;
}
.mystyle {
	border: 2px solid red;
	background: yellow;
}
/*CSS를 이용한 방법
span:hover {
	border: 2px solid red;
	background: yellow;
}
*/
</style>
</head>
<body>
	<h1>Mouse Event</h1>
	<hr>
	<p>click : 태그에서 마우스 버튼을 누른 경우 발생되는 이벤트</p>
	<p>dblclick : 태그에서 마우스 버튼을 두번 연속 누른 경우 발생되는 이벤트</p>
	<p>mouseenter : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생</p>
	<p>mouseleave : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생</p>
	<p>mouseover : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생</p>
	<p>mouseout : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생</p>
	<p>hover : 마우스 커서가 태그에 진입하거나 벗어난 경우 발생되는 이벤트</p>
	<hr>
	<!--<div><span class="mystyle">마우스 이벤트-1</span></div>-->
	<div><span>마우스 이벤트-1</span></div>
	<div><span>마우스 이벤트-2</span></div>
	<div><span>마우스 이벤트-3</span></div>
	<div><span>마우스 이벤트-4</span></div>
	<div><span>마우스 이벤트-5</span></div>
	<script type="text/javascript">
	/*
	$("span").click(function() {
		//$(selector).addClass(name) : 선택자로 검색된 태그의 class 속성값을 추가하는 메소드
		$(this).addClass("mystyle");
		//
		//$(selector).removeClass(name) : 선택자로 검색된 태그의 class 속성값을 제거하는 메소드
		//$(this).removeClass("mystyle");
		//
		//$(selector).toggleClass(name) : 선택자로 검색된 태그의 class 속성값이 없으면 추가하고 class 속성값이 있는면 제거하는 메소드
		$(this).toggleClass("mystyle");
	});
	*/
	//==============================================================================
	/*
	//더블클릭
	$("span").dblclick(function() {
		$(this).toggleClass("mystyle");
	});
	*/
	//==============================================================================
	/*
	$("span").mouseenter(function() {
		$(this).addClass("mystyle");
	});
	$("span").mouseleave(function() {
		$(this).removeClass("mystyle");
	});
	*/
	//==============================================================================
	/*
	$("span").mouseover(function() {
		$(this).addClass("mystyle");
	});
	$("span").mouseout(function() {
		$(this).removeClass("mystyle");
	});
	*/
	//==============================================================================
	$("span").hover(function() {//태그에 진입한 경우 호출되는 콜백함수
		$(this).addClass("mystyle");
	}, function() {//태그에 벗어난 경우 호출되는 콜백함수
		$(this).removeClass("mystyle");
	});
	</script>
</body>
</html>