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

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 事件在表单事件里

 

jquery 事件--鼠标事件