JQuery4：滑鼠事件和滾動事件

尹成發表於2018-11-14
jQuery事件

#滑鼠事件
###1.click和dblclick

事件方法一般都有三種使用方式：我們就以click為例來介紹這些方式，接下來的方法不再冗餘介紹，只是談論最重要的知識點。

####第一種方式

<div id="test">點選觸發<div>
$("ele").click(function(){
    alert('觸發指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手動指定觸發事件 
});

####第二種方式

<div id="test">點選觸發<div>
$("#test").click(function() {
    //this指向 div元素
});

####第三種方式

<div id="test">點選觸發<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞資料
});

好了，大致就是這三種方式，第二種和第三種用到的比較多。
####dblclick的使用方式

$('#btn').dblclick(function() {
    $('p').html('按鈕被點選了!');
});

###2.mousedown和mouseup
前面的click方法是由這兩個方法組成的，即一個click的事件是由滑鼠按下和滑鼠釋放兩個事件構成的。但是這裡需要注意一些問題。我們講click事件的完整性，是講在某個元素上先後完成mousedown和mouseup，一般沒有時間限制。但是，如果在元素上按下滑鼠，不釋放，然後拖動滑鼠離開這個元素，雖然在理論上這仍然是一個mouseup事件，可是事件並不是在此元素上觸發的，所以認為這個對於此元素來講click事件是不完整的，也就是不予觸發click事件方法。講明白這點，接下來的知識才不會衝突:任何的滑鼠按下的操作都是mousedown事件，任何滑鼠釋放的操作都是mouseup事件。好了，至於其他的更晦澀難懂但是不影響使用的書面語我就不贅述了。

還有一個知識點是需要說一下的，可以用event 物件的which區別按鍵，敲擊滑鼠左鍵which的值是1，敲擊滑鼠中鍵which的值是2，敲擊滑鼠右鍵which的值是3。如下面的例子：

$("button:eq(0)").mousedown(function(e) {     
alert('e.which: ' + e.which)  
})

###3.mousemove
此方法和前面的方法在使用上沒有任何區別，所以這裡不再演示。但是有兩個問題需要注意：mousemove事件是當滑鼠指標移動時觸發的，即使是一個畫素；如果處理器做任何重大的處理，或者如果該事件存在多個處理函式，這可能造成瀏覽器的嚴重的效能問題。

###4.mouseover和mouseout

用來監聽使用者的移入移出操作，相當於JS中的onmouseover()與onmouseout()事件監聽方法。使用方法沒有特別之處

###5.mouseenter和mouseleave

這兩個事件方法就比較特別了，大部分情況下使用出來的效果不會有任何的區別。什麼事件冒泡鬼的，我測試了n多的例子，最後還是發現慕課網的例子可以看出區別。書面都說在子元素上的mouseenter和mouseleave事件不會觸發父元素的相關方法，但是我的測試全都是會觸發的。氣的我的臉都是綠的。慕課網的老師給出的例子是這樣的：

<body>
    <h2>.mouseover()方法</h2>
    <div class="left">
        <div class="aaron1">
            <p>滑鼠離開此區域觸發mouseover事件</p>
            <a>mouseover事件觸發次數：</a><br/>
            <a>mouseover冒泡事件觸發次數：</a>
        </div>
    </div>
 
    <h2>.mouseenter()方法</h2>
    <div class="right">
        <div class="aaron2">
            <p>滑鼠進入此區域觸發mouseenter事件</p>
            <a>mouseenter事件觸發次數：</a><br/>
            <a>mouseenter冒泡事件觸發次數：</a>
        </div>
    </div>
    <br/>
   
    
    <script type="text/javascript">
 
        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>
 
 
    <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>
 
 
</body>

如果在p元素與div元素都繫結mouseover事件，滑鼠在離開p元素，但是沒有離開div元素的時候，觸發的結果:
1、p元素響應事件
2、div元素響應事件
這裡的問題是div為什麼會被觸發？ 原因就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會被觸發，所以在這種情況下面，jQuery推薦我們使用 mouseenter事件，mouseenter事件只會在繫結它的元素上被呼叫，而不會在後代節點上被觸發。

然後我還是很疑惑，滿頭的霧水。╮(╯▽╰)╭，算了，既然不是大牛，先不要糾結這麼多了。以後不出問題就沒事，出問題了就換另外一種方法試試，二者既然都有自己的獨特的地方，那就有它們最適用的地方。

###6.hover

hover的底層封裝了mouseenter和mouseleave，即一個方法完成移入移出一套動作的監聽。但是你會發現在許多情況下你用mouseover和mouseout重寫這個方法，達到的效果是一樣的，但是注意了，細微的差別不容忽視，還有就是專案做大了會出現很多問題的，所以建議多使用mouseenter和mouseleave。hover的使用方法如下：

$("#div2").hover(
function() {
$(this).css('background-color', 'pink');}, 
function() {
$(this).css('background-color', '#bbffaa');}
);

###7.focusin和focusout

這兩個方法監聽游標的聚焦和失焦事件，對，沒錯，在輸入框輸入文字的地方用的最多。下面是我自己寫的一個小例子。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery滑鼠事件之focusin事件和focusout事件</title>
    <script src="../jquery_js/jquery-3.2.0.min.js"></script>
    <style type="text/css">
    label,
    input {
        font-family: "微軟雅黑";
    }
    
    input {
        color: #AFABAB;
        border: 1px solid blue;
    }
    </style>
</head>
 
<body>
    <div>
        <label>輸入使用者名稱:</label>
        <input type="text" id="name" value="饒舸璇">
    </div>
    <script type="text/javascript">
    // 滑鼠聚焦到輸入框的時候，字型顏色變為黑色，輸入框邊框變紅
    $("#name").focusin(function() {
        $(this).css({
            color: 'black',
            border: '1px solid red'
        });
        $(this).val('');
    });
    // 滑鼠移出輸入框
    $("#name").focusout(function() {
        $(this).css({
            color: '#AFABAB',
            border: '1px solid blue'
        });
        $(this).val('CSDN');
    });
    </script>
</body>
 
</html>

#滾動事件
###1、獲取和設定元素的尺寸

width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

###2、獲取元素相對頁面的絕對位置

offse()

###3、獲取可視區高度

$(window).height();

###4、獲取頁面高度

$(document).height();

###5、獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

###6、頁面滾動事件

$(window).scroll(function(){  
    ......  
})

學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群：721929980
在這裡插入圖片描述

相關文章