首页 > 代码库 > jquery 事件--鼠标事件

jquery 事件--鼠标事件

2024-09-21 06:14:55   218人阅读

一、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. 

  2. div元素响应事件
    3. 



这里的问题是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 事件在表单事件里


 
jquery 事件--鼠标事件






























        

            
                
                  
                
                

                    联系

                    我们