마우스 이벤트
페이지 정보
본문
이벤트 종류 | 설명 |
.click() | 마우스를 클릭했을 때 이벤트를 발생시킨다. |
.dblclick() | 마우스를 더블 클릭했을 때 이벤트를 발생시킨다. |
.mouseover() | 마우스를 오버했을 때 이벤트를 발생시킨다. |
| .mouseout() | 마우스를 아웃했을 때 이벤트를 발생시킨다. |
| .mouseenter() | 마우스가 들어갔을 때 이벤트를 발생시킨다. |
| .mouseleave() | 마우스가 떠났을 때 이벤트를 발생시킨다. |
| .mousedown() | 마우스를 눌렀을 때 이벤트를 발생시킨다. |
| .mouseup() | 마우스를 떼었을 때 이벤트를 발생시킨다. |
| .mousemove() | 마우스를 움직였을 때 이벤트를 발생시킨다. |
| .hover() | mouseenter() 와 mouseleave()를 하나로 만든 이벤트이다. |
ex)
<style>
.bg {
padding: 40px;
background: #ccc;
}
.inner {
padding: 20px;
background: #999;
}
</style>
<script>
$(document).ready(function(){
//.wrap1
$(".wrap1").mouseover(function(){
$(".display1").append("<b>마우스오버</b>");
});
$(".wrap1").mouseout(function(){
$(".display1").append("<font color=red>마우스아웃</font>");
});
$(".wrap1").mouseleave(function(){
$(".display1").append("<font color=blue>마우스떠남</font>");
});
//.wrap2
$(".wrap2").mouseenter(function(){
$(".display2").append("<b>마우스들어감</b>");
});
$(".wrap2").mouseout(function(){
$(".display2").append("<font color=red>마우스아웃</font>");
});
$(".wrap2").mouseleave(function(){
$(".display2").append("<font color=blue>마우스떠남</font>");
});
});
</script>
<div class="wrap1 bg">
<div class="inner">mouseover</div>
</div>
<div class="display1"></div>
<br>
<div class="wrap2 bg">
<div class="inner"> mouseenter</div>
</div>
<div class="display2"></div>
[실행내용]
- 이전글▼ jQuery 이벤트 종류 ( 냉무 ) 21.07.20
- 다음글키보드 이벤트 21.07.20
댓글목록
등록된 댓글이 없습니다.