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