목차
- mousemove() 예제 - p요소에서 마우스커서 움직인 횟수
- mousemove() 정의
- mousemove() 구문
- mousemove() 예제 - cf. mouseover, mouseenter
mousemove() 예제 - p요소에서 마우스커서 움직인 횟수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});
});
</script>
<p>마우스커서 좌표 : <span></span>.</p>
결과보기
mousemove() 정의
※ 마우스커서 (= 마우스포인터)
mousemove 이벤트는 마우스커서가 선택 요소 내에서 이동할 때 발생.
※ mousemove() 메서드는 아래 2가지 역할 수행.
ⓘ mousemove 이벤트 촉발.
② mousemove 이벤트 발생 시 실행할 함수 연결.
주의.
시스템 자원을 굉장히 많이 차지하므로, 사용에 신중을 기할 것.
(∵ 마우스커서 1px 이동 때마다 mousemove 이벤트 발생.)
mousemove() 구문
mousemove 이벤트 촉발.
$(selector).mousemove()
mousemove 이벤트에 함수 부착.
$(selector).mousemove(function)
[매개변수]
function
필수. mousemove 이벤트 발생 시 실행할 함수 지정.
mousemove() 예제 - cf. mouseover, mouseenter
<style>
div {
width: 200px;
height: 100px;
border: 1px solid gray;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: silver;
}
h3 {background-color: white; padding:10px 5px;}
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 요소 안에서 마우스커서 움직일 때마다 이벤트 발생.
