목차
- mouseenter() 예제 - mouseenter 이벤트 때 경고창 띄우기
- mouseenter() 정의
- mouseenter() 구문
- mouseenter() 예제 - cf. mouseover(), mousemove()
mouseenter() 예제 - mouseenter 이벤트 때 경고창 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hz").mouseenter(function(){
alert("Homzzang.com");
});
});
</script>
<p id="hz">홈짱닷컴 주소 보기</p>
결과보기
mouseenter() 정의
mouseenter 이벤트는 마우스커서가 선택 요소로 들어갈 때 발생.
※ mouseenter() 메서드는 2가지 작동 가능.
① mouseenter 이벤트 촉발.
② mouseenter 이벤트 발생 시 실행할 함수 연결.
1. 함수 비교.
mouseover() 메서드
: 마우스커서가 선택 요소 및 자식 요소에 들어가면 이벤트 발생.
mouseenter() 메서드
: 마우스커서가 선택 요소에 들어갈 때만 이벤트 발생.
2.
mouseleave() 메서드와 주로 함께 사용됨.
mouseenter() 구문
mouseenter 이벤트 촉발.
$(selector).mouseenter()
mouseenter 이벤트에 함수 연결.
$(selector).mouseenter(function)
[매개변수]
function
선택. mouseenter 이벤트 발생 시 실행할 함수 지정.
mouseenter() 예제 - cf. mouseover(), mousemove()
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
h3 {background-color: white; padding:20px;}
span {display;block; color:red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var z = 0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x += 1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y += 1);
});
$("div.move").mousemove(function(){
$(".move span").text(z += 1);
});
});
</script>
<div class="over">
<h3>Mouseover 횟수: <span></span></h3>
</div>
<div class="enter">
<h3>Mouseenter 횟수: <span></span></h3>
</div>
<div class="move">
<h3>Mousemove 횟수: <span></span></h3>
</div>
결과보기
PS.
mouseover 이벤트
: 마우스커서가 div, h3 각각 들어갈 때 이벤트 발생.
mouseenter 이벤트
: 마우스커서가 div 들어갈 때만 이벤트 발생.
mousemove 이벤트
: 마우스커서가 div 위에서 1px 움직일 때마다 이벤트 발생.