jQueryでhover を使ったときの挙動に関する理由について

Question

jQueryでhover を使ったときの挙動に関する理由について、
わからない点がありましたのでご教授いただけるとありがたいです。

jQueryの「hover」を入力した際、「hoverしたときの動作」と
「hoverしなくなったときの動作」を「function」で区切って記載しているかと思います。

その2個目の「function」を入力することで
「hoverしなくなったときの動作」が実現する理由がわかりません。

ネットで調べてみたのですが、納得できるようなサイトを見つけることができませんでした。
お手数をおかけしますが、よろしくお願いいたします。

※以下は参考コードです。

  	$('#partslist').hide();

   $('#parts').hover(
   
    function(){
     	$('#partslist').slideToggle(300);
     	$
     },
  //この↓のコードが、なぜhober解除時の動作なのか分かっておりません。
     function(){
    	$('#partslist').fadeOut(500);
     });

Answer 1

jQueryのhoverメソッドの第二引数は、マウスアウト時の処理となります。
http://semooh.jp/jquery/api/events/hover/over%2C+out/

これが第一引数で、

function(){
         $('#partslist').slideToggle(300);
         $
     },

これが第二引数ですよね？

//この↓のコードが、なぜhober解除時の動作なのか分かっておりません。
     function(){
        $('#partslist').fadeOut(500);
     });

Comments

[hainan]

早速の回答ありがとうございます。

いただいたリンク先、コメントを確認させていただいたのですが、
第二引数に、そのように記載するルール（jQuery用のプログラム）が
作られていて、それでこのように記載する、という風に考えるしかないのでしょうか。。。
（そういうルールだと認識するしかないのでしょうか）

無知で申し訳ありません。

[maisumakun]

そのとおりですね。

[hainan]

回答ありがとうございます！

考えすぎだったのかもしれません。。。
そういうルールだと思って使います。ありがとうございました！！

Answer 2

jquery-3.2.1.js の8294行目で .hover() が定義されています。

• https://code.jquery.com/jquery-3.2.1.js

jQuery.fn.extend( {
  hover: function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
  }
} );

5531行目で .mouseenter(), .mouseleave() が定義されています。
(mouseover, mouseout イベントを元にした独自拡張イベントです)

// Create mouseenter/leave events using mouseover/out and event-time checks
// so that event delegation works in jQuery.
// Do the same for pointerenter/pointerleave and pointerover/pointerout
//
// Support: Safari 7 only
// Safari sends mouseenter too often; see:
// https://bugs.chromium.org/p/chromium/issues/detail?id=470258
// for the description of the bug (it existed in older Chrome versions as well).
jQuery.each( {
  mouseenter: "mouseover",
  mouseleave: "mouseout",
  pointerenter: "pointerover",
  pointerleave: "pointerout"
}, function( orig, fix ) {
  jQuery.event.special[ orig ] = {
    delegateType: fix,
    bindType: fix,

    handle: function( event ) {
      var ret,
        target = this,
        related = event.relatedTarget,
        handleObj = event.handleObj;

      // For mouseenter/leave call the handler if related is outside the target.
      // NB: No relatedTarget if the mouse left/entered the browser window
      if ( !related || ( related !== target && !jQuery.contains( target, related ) ) ) {
        event.type = handleObj.origType;
        ret = handleObj.handler.apply( this, arguments );
        event.type = fix;
      }
      return ret;
    }
  };
} );

コードが複雑ですが、「addEventListener + mouseover, mouseout イベントのみで hover の実装を試みれば、理解できるのではないかと思います。

Re: hainan さん

Comments

[hainan]

ありがとうございます！！

いただいた内容を元に、Google先生に頼りつつ
コードの解析と、おすすめいただいたイベントを組み合わせて試してみます。

重ね重ねありがとうございました！！

Answer 3

イメージ的にはonでこんな風に処理したほうがわかりやすいかもしれません

$(function(){
  $('#hoge').on({
    "mouseover":function(){
      console.log("over")
      $(this).css("background-Color","red");
    },
    "mouseout":function(){
      console.log("out")
      $(this).css("background-Color","");
    }
  });
});

<div id="hoge">test</div>

Comments

[hainan]

回答ありがとうございます！

（onメソッドも、まだ理解できていない状態で申し訳ないです・・・）
実は「hover 」だけ書いているけど「on」が省略されていて、　
「hover」内の「function」の前に、「mouseover」「mouseout」があり
それが省略されている、というイメージなのでしょうか？