zoukankan      html  css  js  c++  java
  • jQuery常用事件方法——mouseenter、mouseleave、hover方法

    jQuery常用事件方法
    • jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数

    • mouseenter()方法:鼠标进入一个元素触发的事件

    • mouseleave()方法:鼠标离开一个元素触发的事件

    • 注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适

    下面是代码对比:

    <div class="parent">
       <div class="box"></div>
    </div>
     <script src="../jq/jquery-1.12.4.min.js"></script>
       <script>
         var $box = $(".box");
         var $parent = $(".parent");
         //对比mouseenter、mouseleave 和 mouseover、mouseout
         // 对比mouseenter、mouseleave 不冒泡
         $box.mouseenter(function(){
            console.log("box mouse in")
          })
         $box.mouseleave(function(){
            console.log("box mouse out")
         })
         $parent.mouseenter(function(){
            console.log("parent mouse in")
         })
         $parent.mouseleave(function(){
            console.log("parent mouse out")
         })
    

    //mouseover、mouseout  冒泡
    $box.mouseover(function(){
        console.log("box mouse in")
    })
    $box.mouseout(function(){
        console.log("box mouse out")
    })
    $parent.mouseover(function(){
        console.log("parent mouse in")
    })
    $parent.mouseout(function(){
        console.log("parent mouse out")
    })
    

    • hover()方法:相当于将mouseenter和mouseleave事件进行了合写

      hover(鼠标移上执行的事件函数,鼠标离开执行的事件函数)

    //hover() 对mouseenter和mouseleave合并书写
    //$box.hover(function () { }, function () { })
    $box.hover(function(){
        $box.addClass("big");
    },function(){
       $box.removeClass("big")
    })
    
    
  • 相关阅读:
    B. Xor of 3 题解(思维+构造)
    小 L 与 GCD 题解(数学 hard)
    F. Clear The Matrix 题解(状压dp)
    小顶堆与大顶堆的自定义cmp函数
    字符指针、字符数组
    python中创建dict对象
    中缀表达式转后缀表达式
    vue中keep-alive,include的缓存问题
    vue 冒号 :、@、# 是什么意思? v-bind v-on v-slot v-是指令
    vue 自定义指令 v-
  • 原文地址:https://www.cnblogs.com/dreamtown/p/14588777.html
Copyright © 2011-2022 走看看