jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)

时间:2021-11-09 21:37:28

1.区别:

   bind方式,进入外部区域和内部区域都会触发相关方法(methodA 或methodB);

   hover方式,进入内部区域不会再触发相关方法。

2.example:

 
  <body>
    <div class="outer" id="outer1">
      Outer 1
      <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
      Outer 2
      <div class="inner" id="inner2">Inner 2</div>
    </div>
    <div id="console"></div>

<script type="text/javascript">
      function report(event) {
        $('#console').append('<div>'+event.type+'</div>');
      }

      $(function(){
        $('#outer1')
         .bind('mouseover',report)
         .bind('mouseout',report);
        $('#outer2').hover(report,report);
      });
    </script>
  </body>