jquery 事件--鼠標事件

1、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"); });  

 

2、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();

 

3、mousemove() 鼠標移動

• mousemove事件是當鼠標指針移動時觸發的，即便是一個像素
• 若是處理器作任何重大的處理，或者若是該事件存在多個處理函數，這可能形成瀏覽器的嚴重的性能問題

<div class="aaron1">
    <p>鼠標在綠色區域移動觸發mousemove</p>
    <p>移動的X位置：</p>
</div>

$(".aaron1").mousemove(function(e) {
  $(this).find('p:last').html('移動的X位置：' + e.pageX)
})

 

 

4、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)) })

 

5、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>

 

 

6、hover() 事件

在元素上移進移出切換其換色，通常經過2個事件配合就能夠達到，這裏用mouseenter與mouseleave，這樣能夠避免冒泡問題

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

直接用一個hover方法，能夠便捷處理
$("p").hover(function(){
　　$(this).css();
})

 

7、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 事件在表單事件裏