• jquery 事件--鼠标事件


    一、click( )  与 dblclick() --双击 

    • click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发
    • 在同一元素上同时绑定 click 和 dblclick 事件是不可取的。
     $(".div").click(function(){
        alert("hello") 
     })

      $('p').click(function(e) {
        alert(e.target.textContent); // 打印所点击对象的文本
      })

      function abc(e) {
        alert(e.data) //1111
      } 

      $("button:eq(2)").click(1111, abc); // 点击按钮,调用data方法

    
    
    //click 事件的3种写法
    
    //1
    $("#box").click(function(){  
           alert("Hello ");  
      }); 
    
    //2
    $('#box').bind("click", function(){  
         alert("Hello");  
    }); 
    
    //3
    $('#box').on('click', function(){  
         alert("Hello");  
    });  

    二、mousedown()  与   mouseup() 

    • mousedown强调是按下触发
    • 任何鼠标按钮被按下时都能触发mousedown事件
    • 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

       

    // 点击按钮,弹出是哪个键按下了,左键是1,中间滚轮是2,右键是3
    $("button:eq(0)").mousedown(function(e) {
          alert('e.which: ' + e.which)
    })
    
     function fn(e) {
        alert(e.data) //1111
     }
     function a() {
        $("button:eq(2)").mousedown(1111, fn)
     }
     a();

    三、mousemove() 鼠标移动

    • mousemove事件是当鼠标指针移动时触发的,即使是一个像素
    • 如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题
    <div class="aaron1">
        <p>鼠标在绿色区域移动触发mousemove</p>
        <p>移动的X位置:</p>
    </div>
    
    $(".aaron1").mousemove(function(e) {
      $(this).find('p:last').html('移动的X位置:' + e.pageX)
    })

    四、mouseover()  与 mouseout()

    移入移出事件

    <div class="aaron1">
        <p>鼠标移进此区域触发mouseover事件</p>
        <a>进入元素内部,mouseover事件触发次数:</a>
    </div>
    var n = 0;
    //绑定一个mouseover事件
    $(".aaron1 p:first").mouseover(function(e) {
         $(".aaron1 a").html('进入元素内部,mouseover事件触发次数:' + (++n))
    })

    五、mouseenter() 与 mouseleave()

    与mouseover() /mouseout() 类似

    mouseenter事件和mouseover的区别

    关键点就是:冒泡的方式处理问题
    

    简单的例子:

    mouseover为例:

    <div class="aaron2">
        <p>鼠标离开此区域触发mouseleave事件</p>
    </div>

    如果在p元素与div元素都绑定mouseover事件,鼠标在离开p元素,但是没有离开div元素的时候,触发的结果:

    1. p元素响应事件
    2. div元素响应事件

    这里的问题是div为什么会被触发? 原因就是事件冒泡的问题,p元素触发了mouseover,他会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就会被触发

    所以在这种情况下面,jQuery推荐我们使用 mouseenter事件

    mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发

    <style>p{height: 50px;border: 1px solid red;margin: 30px;}</style>
    <div class="aaron1">
        <p>鼠标离开此区域触发mouseover事件</p>
        <a>mouseover事件触发次数:</a><br/>
        <a>mouseover冒泡事件触发次数:</a>
    </div>
    <div class="aaron2">
        <p>鼠标进入此区域触发mouseenter事件</p>
        <a>mouseenter事件触发次数:</a><br/>
        <a>mouseenter冒泡事件触发次数:</a>
    </div>
    
      var i = 0;
       $(".aaron1 p").mouseover(function(e) {
           $(".aaron1 a:first").html('mouseover事件触发次数:' + (++i))
       })
       var n = 0;
       $(".aaron1").mouseover(function() {
           $(".aaron1 a:last").html('mouseover冒泡事件触发次数:' + (++n))
       })
    <script type="text/javascript"> var i = 0; $(".aaron2 p").mouseenter(function(e) { $(".aaron2 a:first").html('mouseenter事件触发次数:' + (++i)) }) var n = 0; $(".aaron2").mouseenter(function() { $(".aaron2 a:last").html('mouseenter冒泡事件触发次数:' + (++n)) }) </script>

    六、hover() 事件

    在元素上移进移出切换其换色,一般通过2个事件配合就可以达到,这里用mouseenter与mouseleave,这样可以避免冒泡问题

    $(ele).mouseenter(function(){
         $(this).css("background", '#bbffaa');
     })
    $(ele).mouseleave(function(){
        $(this).css("background", 'red');
    })

    直接用一个hover方法,可以便捷处理
    $("p").hover(function(){
      $(this).css();
    })

    七、focusin() 与 focusout()

    当一个元素,或者其内部任何一个元素获得焦点的时候,

    例如:input元素,用户在点击聚焦的时候,如果开发者需要捕获这个动作的时候,jQuery提供了一个focusin事件<input type="text" />

     $("input:first").focusin(function() {
          $(this).css('border','2px solid red');// input 获得焦点,边框变红
     })

      $("input:first").focusout(function() {
        $(this).css('border','2px solid blue');// 失去焦点,
      })

     

    //不同函数传递数据
      function fn(e) {
        $(this).val(e.data)
      }

      function a() {
        $("input:last").focusin('请输入你的名字', fn)
      }
      a();

     

    focus blur 事件在表单事件里

  • 相关阅读:
    第三周课程总结&实验报告
    2019春学习总结
    第十二周
    第十一周
    第十周
    第九周
    第八周作业
    第七周作业
    实验报告3&学习总结
    实验报告2
  • 原文地址:https://www.cnblogs.com/luhailin/p/6841879.html
Copyright © 2020-2023  润新知