jquery事件使用方法總結

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

---

1、鼠標事件

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

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

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

擴展：

//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. dblclick()：鼠標雙擊事件

$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. 鼠標進入和離開（進入子元素不觸發）

• 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. 事件委託

• 定義：

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

• 委託事件：

1. delegate():

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

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

• event指觸發事件的那個對象。

1. on():

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

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

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

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

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

• 取消委託

1. undelegate():

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

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

1. off():

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

總結：

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

• 做者：天宇之遊
• 出處：http://www.cnblogs.com/cwp-bg/
• 本文版權歸做者和博客園共有，歡迎轉載、交流，但未經做者贊成必須保留此段聲明，且在文章明顯位置給出原文連接。