버블링
jquery 이벤트 버블링 : 실행되는 A이벤트를 막고 B이벤트를 사용하는거를 의미함
Mouse Event
click : 태그에서 마우스 버튼을 누른 경우 발생되는 이벤트
dblclick : 태그에서 마우스 버튼을 두번 연속 누른 경우 발생되는 이벤트
mouseenter : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생
mouseleave : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생
mouseover : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생
mouseout : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생
hover : 마우스 커서가 태그에 진입하거나 벗어난 경우 발생되는 이벤트
<!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;
}
/*
span:hover {
border: 2px solid red;
background: yellow;
}
*/
</style>
</head>
<body>
<h1>Mouse Event</h1>
<hr>
<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>