공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

mouseenter, mouseleave - 마우스 진입, 벗어남 감지

serpiko 2013. 10. 13. 22:48
.mouseenter( handler(eventObject) )Returns : jQuery

개요 : 요소에 마우스가 진입했을 때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.

  • .mouseenter( handler(eventObject) )
  • mouseenter(eventObject) 이벤트가 발생했을 때 실행될 기능.
  • .mouseenter( [eventData], handler(eventObject) )
  • eventData 이벤트 핸들러에 전달할 데이터 집합.
  • handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
  • .mouseenter( )

.mouseleave( handler(eventObject) )Returns : jQuery

개요 : 요소에서 마우스가 떠날때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.

  • .mouseleave( handler(eventObject) )
  • handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
  • .mouseleave( [eventData], handler(eventObject) )
  • eventData 이벤트 핸들러에 전달할 데이터 집합.
  • handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
  • .mouseleave( )

 

 

실무코드)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
$('#gnb li').on('mouseenter',function(){
  if($('body').hasClass('mobile')){
  }else{
   $(this).addClass('on');
  }
 }).on('mouseleave',function(){
  if($('body').hasClass('mobile')){
  }else{
   $(this).removeClass('on');
  }
 });

 

 

 

mouseover와 mouseenter의 차이점

 

mouseover는 직접 이벤트를 걸지 않은 자식요소에 마우스 포인터가 와도 발생.

mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생.

 

이벤트 버블링 관점에서 다르며, mouseover는 마우스 포인터가 요소 위에 올라와도 이벤트가 발생하게 되지만

mouseenter 이벤트는 바인딩 된 요소에 마운스 포인터가 진입해야만 발생하며 자식 요소에는 이벤트가 발생하지 않는다.

mouseenter는 이벤트가 묶인 요소 자체에서만 발생된다는 것.

 

차이점 예제)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div class="out overout"><p>move your mouse</p><div class="in overout">
<p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave">
<p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    var n = 0;
    $("div.enterleave").mouseenter(function(){
      $("p:first",this).text("mouse enter");
      $("p:last",this).text(++n);
    }).mouseleave(function(){
      $("p:first",this).text("mouse leave");
    });

</script>

</body>
</html>

 

출처 : http://api.jquery.com/mouseenter/

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

append() - 마지막 자식 요소 추가  (0) 2013.10.13
xml - 파싱1  (0) 2013.10.13
.animate - 움직이기  (0) 2013.10.13
.height() - 높이값  (0) 2013.10.13
.removeClass - 클래스제거  (0) 2013.10.13
댓글