jQuery移入移出事件

mouseover与mouseout

• mouseover与mouseout可以监听鼠标的移入与移出。mouseover监听移入，mouseout可以监听移出事件
• 但是mouseover与mouseout如果监听父元素的话，当移入父元素的子元素时，子元素也会监听父元素的移入与移出
• 当移入子元素时，会调用父元素的移出事件与子元素的移入事件；移出子元素时会调用子元素的移出事件与父元素的移入事件

      $(".father").mouseover(function () {
        console.log("移入")
      })
      $(".father").mouseout(function () {
        console.log("移出")
      })

mouseenter与mouseleave

• mouseenter与mouseleave也可以监听移入移出事件。mouseenter为移入事件，mouseleave为移出事件
• 与mouseover与mouseout不同，该方法当移入子元素时不会调用移入移出事件

      $(".father").mouseenter(function () {
        console.log("移入")
      })
      $(".father").mouseleave(function () {
        console.log("移出")
      })

hover

• hover方法也可以监听移入移出事件。不同的是，hover方法既可以监听移入方法，也可以监听移出方法
• hover可以传递两个参数，这两个函数均为回调函数。第一个参数为移入事件，第二个参数为移出事件

      $(".father").hover(function () {
        console.log("移入")
      }, function () {
        console.log("移出")
      })

• hover也可以传递一个参数。则该参数为回调函数，当移入事件触发与移出事件触发时均会调用回调函数

      $(".father").hover(function () {
        console.log("移入移出")
      })