jquery 事件--鼠标事件

Posted 2020-09-17 DOIT

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