鋒利的 jQuery (第二版) jQuery 中的事件

時間 2021-04-20

標籤 javascript html java python jquery 數組瀏覽器函數 spa 欄目 JQuery 简体版

原文原文鏈接

4.1 jQuery 中的事件

4.1.1 加載 DOM

1. 執行時機
$(document).ready(function(){}): DOM 徹底就緒即執行。
window.onload = function(){} 等價於 $(window).load(function(){}): 全部關聯文件加載完才執行。
2. 屢次使用
3. 簡寫方式
$(function(){}) 或 $().ready(function(){})javascript

4.1.2 事件綁定

bind(type [, data] , fn): 
type 爲事件類型， 包括：blur、focus、load、resize、scroll、unload、click、dbclick、mouse[down, up, move, over, out, enter, leave]、change、select、submit、key[down, press, up]、error。
data 爲可選參數， 做爲 event.data 屬性值傳遞給事件對象的額外數據對象。
fn 爲綁定的處理函數。

3. 屢次使用 bind 函數可綁定多個不一樣事件
4. 簡寫綁定事件html

$(選擇器).mouseover(function(){
        // body...
    }).mouseout(function(){
        // body...
    });

4.1.3 合成事件

1. hover()方法
hover(enter, leave): 模擬光標懸停事件，光標移到元素上方時觸發 enter 事件，光標離開時觸發 leave 事件。
2. toggle()方法
toggle(fn1, fn2, ...fnN): 模擬鼠標連續點擊事件，點擊第1次觸發第一個事件，點擊第2次觸發第二個事件。隨後的點擊會重複循環這 N 個事件。java

4.1.4 事件冒泡

1. 冒泡的概念python

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>body
    <div id="content">外層div
        <span>
            內部span
        </span>外層div
    </div>
    <div class="msg">
    </div>
</body>
<script>
$(function() {
    $("span").bind("click", function() {
        var text = $(".msg").html() + "<p>這是內部span</p>";
        $(".msg").html(text);
    });
    $("#content").bind("click", function() {
        var text = $(".msg").html() + "<p>這是外層div</p>";
        $(".msg").html(text);
    });
    $("body").bind("click", function() {
        var text = $(".msg").html() + "<p>body被點擊</p>";
        $(".msg").html(text);
    });
});
</script>

</html>

單擊內部 <span> 元素，觸發 <span> 元素的 click 事件，接着觸發 div 的 click 事件，最後觸發 body 的 click 事件。
元素的 click 事件會按照以下順序「冒泡」：
（1） <span>
（2） <div>
（3） <body>
2. 事件冒泡引起的問題
事件對象jquery

$(選擇器).bind("click", function(event){ //event: 事件對象
     //...
});

中止事件冒泡數組

$(選擇器).bind("click", function(event){ //event: 事件對象
     //...
     event.stopPropagation();   // 中止事件冒泡
});

阻止默認行爲瀏覽器

$(選擇器).bind("click", function(event){ //event: 事件對象
     //...
     event.preventDefault();   // 阻止默認行爲
});

事件捕獲
事件捕獲是從最頂端往下開始觸發。
由冒泡的例子，元素的 click 事件會按照如下順序捕獲。
（1） <body>
（2） <div>
（3） <span>
事件捕獲須要用原生的 javascript 。函數

4.1.5 事件對象的屬性

（1） event.type
做用：獲取事件類型。
（2） event.preventDefault()
（3） event.stopPropagation()
（4） event.target
做用：獲取到觸發事件的元素。
（5） event.relatedTarget
標準 DOM 中， mouseover 和 mouseout 所發生的元素能夠經過event.target 來訪問，相關元素是經過 event.relatedTarget 來訪問的。
（6） event.pageX 和 event.pageY
做用：獲取光標相對於頁面的 x 座標和 y 座標。
（7） event.which
做用：在鼠標單擊事件中獲取到鼠標的左、中、右鍵；在鍵盤事件中獲取到鍵盤的按鍵。ui

$("a").mousedown(function(event){
    alert(event.which);
});
說明：當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。

（8）event.metaKey
做用：鍵盤事件中獲取 <ctrl> 按鍵。spa

4.1.6 移除事件

unbind([type], [data]):
（1） 沒有參數， 刪除全部綁定事件；
（2） 只有事件類型做爲參數， 刪除該類型的綁定事件；
（3） 綁定時傳遞處理函數做爲第二個參數， 則只有這個特定的事件處理函數會被刪除。

one(type, [data], fn):
在每一個對象上， 處理函數只會被觸發一次， 語法與 bind 相同。

4.1.7 模擬操做

trigger(type, [data]):
第一個參數是要觸發的事件類型， 能夠是自定義的點擊事件， 第二個參數爲傳遞給處理函數的附加數據，以數組方式傳遞。

$(".content").bind("myClick", function(event, param1, param2){
   alert(param1 + param2);
});
$(".content").trigger("myClick", ["參數一", "參數二"]);

執行默認操做
trigger() 方法觸發事件後，會執行瀏覽器默認操做。
解決辦法
triggerHandler() 方法，不執行瀏覽器默認操做。

4.1.8 其餘用法

1. 綁定多個事件類型
2. 添加事件命名空間，便於管理。

$(function() {
    $("div").bind("click.com", function() {
        var text = $(".msg").html() + "<p>這是內部div</p>";
        $(".msg").html(text);
    });
    $("div").bind("mouseover.com", function() {
        var text = $(".msg").html() + "<p>這是外層div</p>";
        $(".msg").html(text);
    });
    $("div").bind("dbclick", function() {
        var text = $(".msg").html() + "<p>body被點擊</p>";
        $(".msg").html(text);
    });
    $("p").bind("click", function(){
        $("div").unbind('.com');
    });

});

com 命名空間被刪除，不在「com」的命名空間的「dbclick」事件依然有效。
3. 相同事件名稱，不一樣命名空間執行方法trigger("click!"): 感嘆號爲匹配全部不在命名空間的 click 事件。