JQuery -- Mouseover와 Mouseenter의 차이점

3247 단어
마우스 포인터가 선택한 요소나 하위 요소를 통과하든지 간에mouseover 이벤트를 터치합니다.
마우스 포인터가 선택한 요소를 통과할 때만mouseenter 이벤트를 터치합니다.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
  $("div.over").mouseover(function(){
    $("#id_span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    //$(".enter span").text(y+=1);
    $("#id_span2").text(y+=1);
  });
});
</script>
</head>
<body>
<p> ,  mouseover  。</p>
<p> ,  mouseenter  。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">  Mouseover  :<span id="id_span"></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">  Mouseenter  :<span id="id_span2"></span></h2>
</div>
</body>
</html>

같은 공간에서mouseover는mouseenter보다 우선합니다.
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="lib/jquery.js"></script>
        <script src="js/example_action.js"></script>
        <title>Untitled Document</title>
        <script>
            var x = 0;
            $(document).ready(function(){
                $("button").focus(function(){
                    $("button").css("background-color", "red");
                });
                
                $("button").mouseover(function(){
                    $("#message").append("mouseover
"); $("button").css("background-color", "blue"); }); $("button").mouseenter(function(){ $("#message").append("mouseenter
"); $("button").css("background-color", "yellow"); }); $("button").click(function(){ $("#message").append("button click!
"); }); $("button").dblclick(function(){ $("#message").append("button dblclick!
"); }); $("#id_div").mouseover(function(){ $("#message").text(x+1); }); }); </script> </head> <body> <p>This is example action</p> <p id="message"></p> <button type="button">focus me red, mouse over blue, click me disapper!</button> </body> </html>

좋은 웹페이지 즐겨찾기