【html、CSS、javascript-11】jquery-事件使用方法總結

時間 2019-12-07

標籤 html css javascript jquery 事件使用方法總結欄目 HTML 简体版

原文原文鏈接

jquery提供了許多的事件處理函數，下面對其總結一下，梳理一下知識點，便於記憶和使用。css

1、鼠標事件

1. click()：鼠標單擊事件

$div = $("div")
$div.click(data,function (event) { //點擊盒子變藍
    $(this).css({
        "background": "blue",
    }); 
    console.log(event);
})

$div = $("div") $div.click(data,function (event) { //點擊盒子變藍 $(this).css({ "background": "blue", }); console.log(event); })html

參數function：匿名函數有且只有一個默認的參數event，event輸出事件相關的信息；不容許有其餘的參數，能夠不寫。
參數data：有時候須要傳遞額外的數據給函數，data能夠是一個數組，不須要能夠省略。

擴展：jquery

//event參數能夠獲取事件的各類屬性，有幾個經常使用

event.target:  獲取觸發事件的元素

$div.click(function (event) {
            $(event.target).css({
                    "background": "blue",
                });
    })
    
event.data: 獲取事件傳入的參數數據。
event.pageX: 獲取鼠標光標點擊距離文檔左邊left的距離；
event.pageY: 獲取鼠標光標點擊距離文檔上邊top的距離；

event.offsetX: 獲取鼠標光標點擊距離元素左邊left的距離；
event.offssetY: 獲取鼠標光標點擊距離元素上邊top的距離；

event.screenX: 獲取鼠標光標點擊距離屏幕left的距離；
event.screenY: 獲取鼠標光標點擊距離屏幕top的距離；

擴展2：外層加個function函數表示，只有dom結構樹所有加載完以後，再執行jquery代碼，這樣代碼能夠放在開頭或任意位置了數組

如下是縮寫，非省略寫法是：瀏覽器

$(document.ready(function(){})) ---> $(function(){})app

<body>
    <script>
        $(function () {
            $div.click(data,function (event) { //點擊盒子變藍
                $(this).css({
                    "background": "blue",
                });
                console.log(event);
            })
        })
    </script>
    <div>1111</div>
</body>

2. dblclick()：鼠標雙擊事件dom

$div = $("div")
$div.dblclick()(function (event) { //雙擊盒子變藍
    $(this).css({
        "background": "blue",
    });               
})

參數和click的用法徹底同樣，event一樣能夠獲取衆多的屬性。

3. 鼠標進入和離開（進入子元素也觸發）異步

mouseover()：進入
mouseout()：離開

$div = $("div")
$div.mouseover(function (event) { 
    $(this).css({
        "background": "blue",
    });               
})
$div.mouseout(function (event) { 
    $(this).css({
        "background": "blue",
    });               
})

參數同上，綁定後鼠標進入元素的子元素會再次觸發。

4. 鼠標進入和離開（進入子元素不觸發）ide

mouseenter() 鼠標進入
mouseleave() 鼠標離開

$div = $("div")
$div.mouseenter(function (event) { 
    $(this).css({
        "background": "blue",
    });               
})
$div.mouseleave(function (event) { 
    $(this).css({
        "background": "blue",
    });               
})

參數同上，綁定後鼠標進入和離開子元素不會再次觸發。

5. hover():同時爲mouseenter和mouseleave事件指定處理函數函數

$div = $("div")
// 鼠標進入和移出事件
    $div.hover(function (event) {
        $div.css({
            "background": "blue",
        })

    },function (event) {
        $div.css({
            "background": "red", 
        });
    })

hover能夠同時加入兩個function，第一個是鼠標進入觸發，第二個是移出觸發。
前面不能夠添加data參數，不然報錯。

6. 鼠標按下和鬆開

mouseup() 鬆開鼠標
mousedown() 按下鼠標

$div = $("div")
$div.mousedown(function (event) {
    $(this).css({
        "background": "blue",
    });
    console.log(event);
})

$div.mouseup(function (event) {
    $(this).css({
        "background": "blue",
    });
    console.log(event);
})

參數同click，和點擊事件click不一樣的是，click在鼠標點擊（包括按下和鬆開）後才觸發事件，這裏是按下或鬆開就會觸發。

7. mousemove() 鼠標在元素內部移動

同法和參數同上。

2、鍵盤事件

*keypress()：按下鍵盤（指的是按下）

 $(window).keypress([20],function (event) {
        $div.css({
            "background": "blue",
        });
    console.log(event.which);            
    })

參數：同鼠標事件，第一個參數傳遞數據，function默認參數event值按下鍵盤事件。
鍵盤事件須要綁定可得到焦點的元素，如：input，body，html，通常綁定窗口：window。
若是須要具體判斷按下了那個按鍵，使用event.which,返回鍵盤字母的ascii碼。

注意：若是按下不放開，事件會連續觸發。

*按下和鬆開

keydown() 按下鍵盤
keyup() 鬆開鍵盤

$(window).keydown([20],function (event) {
    $div.css({
        "background": "blue",
    });
    console.log(event);
})

$(window).keyup([20],function (event) {
    $div.css({
        "background": "blue",
    });
    console.log(event);
})

參數同上。
keydown和keypress方法區別在於，keypress事件不會觸發全部的按鍵，好比 ALT、CTRL、SHIFT、ESC等。

3、焦點事件

* 元素獲取和失去焦點

blur() 元素失去焦點
focus() 元素得到焦點

$put = $("input");
$put.focus():元素自動獲取焦點

$put.focus(function (event) {
    console.log(event);
        $div.css({
        "background": "blue",
            })
})//獲取焦點後觸發事件

$put.blur(function (event) {
    console.log(event);
        $div.css({
        "background": "blue",
            })
})//失去焦點後觸發事件

參數同click；
焦點事件通常使用在input標籤上，其餘的標籤通常得不到焦點。

4、表單事件

* submit()：用戶遞交表單

$(".form").submit(function (event) {
    alert("提交事件");
    console.log(event);
    //阻止系統默認事件
    event.defaultPrevented();
    return false;
})

submit事件綁定在form表單上，點擊提交按鈕時觸發該事件，能夠對系統默認的提交進行攔截。
event.defaultPrevented();//阻止系統提交數據

5、其餘事件

* ready()：DOM加載完成後執行

這個事件用來防止js報錯，每次引入js都要使用，不在贅述。

* resize()：瀏覽器窗口的大小發生改變觸發事件

$(window).resize(function () {
    console.log($(window).width());
   })

參數同click,這個事件須要綁定在window上纔會生效，用於監控窗口的變化。

* scroll()：滾動條的位置發生變化

* change()：表單元素的值發生變化

$put.change(function () {
    $div.css({
        "background": "blue",
    });
                
})

當表單元素如單選框、多選框、文本框等值發生變化時觸發。

* unload() ：用戶離開頁面

$(document).unload(function () {
    $div.css({
        "background": "blue",
    });
    console.log("likai");
})

6、通用的綁定事件和解綁方法

* bind()：綁定

$(function(){
    $('div').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

參數：第一個參數爲須要綁定的事件的名字，能夠綁定多個事件，之間用空格隔開；第二個參數是處理函數。

* unbind():解綁

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        // $(this).unbind();解綁全部事件
        $(this).unbind('mouseover');解綁指定事件
    });
});

參數同bind。

* on():綁定和委託均可用的方法

$("div").on(event,childSelector,data,function);
//四個參數

$(function(){
    $('div').on('mouseover click', function(event) {
        $(this).css({
        "background": "blue",
        });
    });
});

參數：
event,須要綁定的事件，多個事件用空格隔開；
function：事件的處理方法。
childSelector：選擇須要委託的元素，用於委託事件。
data：額外的傳參。

* off():解綁

$(function(){
    $('#div1').on('mouseover click', function(event) {
        // $(this).off();解綁全部事件
        $(this).off('mouseover');解綁指定事件
    });
});

* one():綁定一次自動解綁

若是須要觸發事件一次後就自動失效，好比：按鈕點擊一次後就失效使用這個方法。

$(function(){
    $('div').one('mouseover click', function(event) {
        $(this).css({
        "background": "blue",
        });
    });
});

注意：當一次性綁定多個事件時，多個事件相互是獨立的，即若是有一個事件被觸發，那麼這個事件解綁，對另外沒有被觸發的事件沒有影響。

7、自定義和主動觸發事件

說明：對於系統沒有提供的事件，能夠本身定義並主動觸發。

$div.bind("abc",function () {
    $(this).css({
        "background": "blue",
    });
    
})
$div.trigger("abc");

trigger():觸發事件的方法；這種方式相似協程。

8、事件的兩大特徵運用：

1. 事件的冒泡：

定義：一個元素標籤如div,在上面觸發某種事件，如單擊；若是div上沒有定義單擊事件或者定義了單擊事件，但返回值不是false，即沒有阻止冒泡；那麼事件會向父級傳遞，每個定義了單擊事件的父級都會被觸發事件，直到到達document或window。

注意：冒泡是事件的固有屬性（自定義不適用），適合全部的系統事件。

做用：容許多個事件被擊中到父級處理，減小綁定次數，提升性能。

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
       // event.stopPropagation();阻止冒泡

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

說明：上面代碼界面，單擊「grandson」的div，全部事件都會被觸發；
若是要阻止事件冒泡，使用stopPropagation()；

擴展：合併阻止操做

event.stopPropagation();//阻止冒泡
event.preventDefault();//阻止默認行爲

// 合併寫法：
return false;

實際開發中，通常把阻止冒泡和阻止默認行爲合併起來寫。

2. 事件委託

定義：

利用冒泡原理，將要處理相同事件的子元素的事件委託給父級，從而極大減小事件綁定的次數，提升性能。

委託事件：

delegate():

$(function(){
    $list = $('list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})//給列表下面的每一個li元素的事件委託給list列表。

參數：第一個參數是須要委託的元素，採用css選擇器的寫法，默認從一級子元素開始；第二個參數時要委託的事件，能夠是多個，之間用空格隔開，第三個參數是處理函數。
event指觸發事件的那個對象。

on():

$(function(){
    $list = $('list');
    $list.on('click', 'li', function(event) {
        $(this).css({background:'red'});
    });
})//給列表下面的每一個li元素的事件委託給list列表。

參數：

第一個是須要委託的事件，多個用空格隔開；
第二個是須要委託事件的子元素；
第三個是觸發處理函數。

one():委託觸發一次自動取消委託

$(function(){
    $('div').one('click',"li" function(event) {
        $(this).css({
        "background": "blue",
        });
    });
});

說明：參數用法和on事件同樣。

取消委託

undelegate():

$list.undelegate();//選擇器找到委託對象取消委託

使用undelegate（）方法取消委託，全部的子元素的委託都將被取消。

off():

$list.off("click","li");

總結：

每個事件至關於一個協程，異步操做；
全部的事件並列處理，事件不要嵌套事件，不然會出現重複綁定。
能夠進行事件委託儘可能使用委託，減小系統資源消耗。

補充實例：

動態給ul添加li標籤的時候，li標籤原來已經綁定了click事件，但新添加的標籤click不起做用，那麼須要委託綁定delegate()

click和bind是提早綁定，delegate()是當單擊標籤的時候才綁定的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input class="btn" type="button" value="添加">
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>

    <script src="jquery.js"></script>
    <script>
        $(function () {
            $(".btn").click(function () {
                $("ul").append("<li>88</li>")
            });
            $("li").click(function () {
                alert('123')
            })
        });
    </script>
</body>
</html>

原來的代碼能夠彈出，新增的li標籤不能彈出123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input class="btn" type="button" value="添加">
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>

    <script src="jquery.js"></script>
    <script>
        $(function () {
            $(".btn").click(function () {
                $("ul").append("<li>88</li>")
            });
            $("ul").delegate('li','click',function () {  //將全部的li標籤委託綁定給ul
                alert('123')
            })
        });
    </script>
</body>
</html>

將li標籤委託綁定給li