jquery 事件--滑鼠事件

標籤：round   cli   pagex   click   asc   ++i   沒有   font   out   

一、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 事件--滑鼠事件