深入學習jQuery鼠標事件

前面的話

　　鼠標事件是DOM事件中最常用的事件，jQuery對鼠標事件進行了封裝和擴展。本文將詳細介紹jQuery鼠標事件

 

類型

　　鼠標事件共10類，包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave

click         當用戶按下並釋放鼠標按鍵或其他方式“激活”元素時觸發
contextmenu   可以取消的事件，當上下文菜單即將出現時觸發。當前瀏覽器在鼠標右擊時顯示上下文菜單
dblclick      當用戶雙擊鼠標時觸發
mousedown     當用戶按下鼠標按鍵時觸發
mouseup       當用戶釋放鼠標按鍵時觸發
mousemove     當用戶移動鼠標時觸發
mouseover     當鼠標進入元素時觸發
mouseout      當鼠標離開元素時觸發
mouseenter    類似mouseover，但不冒泡
mouseleave    類似mouseout，但不冒泡

 

寫法

　　以上10類鼠標事件，都有對應的寫法。下面以click()事件為例，來說明鼠標事件的寫法

【1】click(handler(eventObject))

　　click()事件是bind()事件的簡寫形式，可以接受一個事件處理函數作為參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').click(function(){
    $(this).css('background','lightblue')
})
</script>

【2】click([eventData],handler(eventObject))

　　click()事件可以接受兩個參數，第一個參數傳遞數據，第二個參數是處理函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').click(123,function(event){
    alert(event.data);
})
</script>    

【3】click()

　　click()事件不帶參數時，變成click()方法，是trigger('click')的簡寫形式

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<script>
$('#btn1').on('click',function(){
    alert(1);
});
$('#btn2').on('click',function(){
   $('#btn1').click();
});
</script>

合成事件

　　jQuery事件對鼠標事件進行了擴展，自定義了兩個合成事件——hover()和toggle()

　　[注意]toggle()事件已經在jQuery1.8版本刪除

hover()

　　hover(enter,leave)事件用於模擬光標懸停事件。鼠標移入時，觸發第一個函數參數；鼠標移出時，觸發第二個函數參數

　　hover()事件實際上是mouseenter事件和mouseleave事件的集合

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').on('mouseenter',function(event){
    $(this).css('background-color','lightblue');
})
$('#box').on('mouseleave',function(event){
    $(this).css('background-color','transparent');
})
</script>

　　用hover()事件實現如下

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').hover(function(){
    $(this).css('background-color','lightblue');
},function(){
    $(this).css('background-color','transparent');
})
</script>

　　當hover()事件只有一個參數時，該參數為mouseenter和mouseleave事件共同的函數

<style>
.active{background-color:lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').hover(function(){
    $(this).toggleClass('active')
})
</script>

toggle()[已刪除]

　　toggle()事件用於模擬鼠標連續單擊事件。第1次單擊，觸發第1個函數參數；第2次單擊，觸發第2個函數函數；如果有更多函數，則依次觸發，直到最后一個。隨后的每次單擊都重復對這幾個函數輪番調用

 

鼠標按鍵

　　事件對象event的which屬性用於區分哪個鍵被按下，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').mousedown(function(event){
    alert(event.which)
})
</script>

修改鍵

　　在按下鼠標時鍵盤上的某些鍵的狀態可以影響到所要采取的操作，這些修改鍵就是Shift、Ctrl、Alt和Meta(在Windows鍵盤中是Windows鍵，在蘋果機中是Cmd鍵)，它們經常被用來修改鼠標事件的行為

　　jQuery參照DOM規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性中包含的都是布爾值，如果相應的鍵被按下了，則值為true；否則值為false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').click(function(event){
    $('#box').html();
    if(event.shiftKey){$('#box').html('shiftKey;') }
    if(event.ctrlKey){$('#box').html('ctrlKey;') }
    if(event.altKey){$('#box').html('altKey;') }
    if(event.metaKey){$('#box').html('metaKey;') }
})
</script>

坐標位置

　　關於坐標位置，DOM事件對象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y這6對信息，但各瀏覽器實現情況差異很大

　　jQuery關於坐標位置，提供了clientX/Y、offsetX/Y、screenX/Y、pageX/Y這四對信息

clientX/Y

　　clientX/Y表示鼠標指針在可視區域中的水平和垂直坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;border:1px solid black"></div>
<script>
$('#box').mousemove(function(event){
    $('#box').html(function(index,oldHtml){
        return 'clientX:' + event.clientX +';clientY:'+event.clientY
    });
})
</script>

offsetX/Y

　　offsetX/Y表示相對於定位父級的水平和垂直坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:400px;border:1px solid black"></div>
<script>
$('#box').mousemove(function(event){
    $('#box').html(function(index,oldHtml){
        return 'clientX:' + event.clientX +';clientY:'+event.clientY + 'offsetX:' + event.offsetX +';offsetY:'+event.offsetY
    });
})
</script>

screenX/Y

　　screenX/Y表示鼠標指針相對於屏幕的水平和垂直坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:400px;border:1px solid black"></div>
<script>
$('#box').mousemove(function(event){
    $('#box').html(function(index,oldHtml){
        return 'clientX:' + event.clientX +';clientY:'+event.clientY + 'screenX:' + event.screenX +';screenY:'+event.screenY
    });
})
</script>

pageX/Y

　　pageX/Y表示相對於頁面的水平和垂直坐標，它與clientX/clientY的區別是不隨滾動條的位置變化

<body style="height:2000px;">
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:100px;width:300px;background:pink;"></div>
<div id="result"></div>
<script>
$('#box').mousemove(function(event){
    $('#result').html(function(index,oldHtml){
        return 'clientX:' + event.clientX +';clientY:'+event.clientY + 'pageX:' + event.pageX +';pageY:'+event.pageY
    });
})
</script>
</body>