mouseover/mouseoutとmouseenter/mouseleave、hoverの違い

javascript
javascript
jQuery

jQueryで扱っているマウスのイベントmouseover/mouseout、mouseenter/mouseleave及びhoverなどがあるが、特にmouseover/mouseoutとmouseenter/mouseleaveの区別がどこにあるかは最初よくわからなかった。単語(over/out、enter/leaver)の意味少し紛らわしくて、余計にその動きが分からなくなった。

ここでマウスのポインターを実際のオブジェクトに移動しながら、mouseover/mouseoutとmouseenter/mouseleaveの区別を観察し、その違いを纏めた

mouseover/mouseoutが入れ子のオブジェクトに移動する際にもoverとoutのエベントが発生(mouseenter/mouseleaveでは発生しない)

  • ここでマウスがあるオブジェクトに合わせるとoverイベント、オブジェクトから出るとoutイベントを呼ぶ（適切か？）
  • 以下のプログラムでこの二つペアの違い確認する 
     <!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>jQueryのテスト</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
  $(function($){
    var inter_num = 0;
    var leave_num = 0;
    var over_num = 0;
    var out_num = 0;
    $("#enter_leave_div").mouseenter(function(){
        inter_num ++ ;
        $("#enter_result_div").text("enter number:"+inter_num) ;
    }).mouseleave(function(){
        leave_num ++ ;
        $("#leave_result_div").text("leave number:"+leave_num) ;
    }) ;
    $("#over_out_div").mouseover(function(){
        over_num ++ ;
        $("#over_result_div").text("over number:"+over_num) ;
    }).mouseout(function(){
        out_num ++ ;
        $("#out_result_div").text("out number:"+out_num) ;
    });
  });
  </script>
  </head>
  <body>
    <div id="enter_leave_div" style="height:200px;
                                     width:400px;
                                     border-style:solid;">
        enter_leave block;
        <div id="enter_leav_inner_div"
            style=" height:100px;
                    width:200px;
                    border-style:solid;
                    position:relative;
                    top:50px; left:50px;">
        enter_leave_inner block</div>
    </div>
    </br>
    <div id="over_out_div" style="height:200px;
                                  width:400px;
                                  border-style:solid;">
        over_out block;
        <div id="over_out_inner_div"
            style="height:100px;
                   width:200px;
                   border-style:solid;
                   position:relative;
                   top:50px; left:50px;">
        over_out_inner block</div>
    </div>
    <div id="enter_result_div">enter number:0</div>
    <div id="leave_result_div">leave number:0</div>
    <div id="over_result_div">over number:0</div>
    <div id="out_result_div">out number:0</div>
  </body>
</html>
  • 上記プログラムの動作結果を以下のようなイメージ纏めた
  • 結論として、mouseover/mouseoutのほうが、入れ子のオブジェクトに移動する際に親の領域と認識しなくなるので、outイベント（親オブジェクトから出る）とoverイベント（入れ子オブジェクトに入る）が発生する
  • mouseover/mouseoutの使用は入れ子のオブジェクト領域に注意する必要がある。

hoverがmouseenter/mouseleaveの合体メッソド

  • ｊQueryのhoverメッソドが二つのコールバック関数(moseenter/mouseleave)から構成される 
    $(セレクター).hover(
  function(){ .... } ,   // overイベント発生時の処理
  function(){ .... }     // outイベント発生時の処理
);
  • 上記コードにある「overイベント」、「outイベント」がmouseenter/mouseleaveと同じ