從零開始學 Web 之 jQuery（六）爲元素綁定多個相同事件，解綁事件

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、爲元素綁定多個相同事件

一、方式一

$("#btn").click(function () {
        console.log("click1");
    }).click(function () {
        console.log("click2");
    }).click(function () {
        console.log("click3");
    });

二、方式二

$("#btn").bind("click",function () {
        console.log("bind:click1");
    }).bind("click",function () {
        console.log("bind:click2");
    }).bind("click",function () {
        console.log("bind:click3");
    });

注意：下面使用 bind 對象的方式，只會執行最後一個相同的綁定事件。

$("#btn").bind({
        "click": function () {
            console.log("bind-obj:click1");
        }, "click": function () {
            console.log("bind-obj:click2");
        }, "click": function () {
            console.log("bind-obj:click3");
        }
    });

2、元素綁定事件的區別

先說結論：經過調用事件名的方式和 bind 的方式只能綁定以前存在的元素，後添加的元素不能綁定事件；而 delegate 和 on 的方式綁定元素的方式能夠。

示例1：

// 事件名   
    $("#btn").click(function () {
        $("#dv").append($("<p>p標籤</p>"));
        $("p").click(function () {
            alert("p被點了");
        });
        $("#dv").append($("<p>p標籤2</p>"));
    });

// bind
    $("#btn").click(function () {
        $("#dv").append($("<p>p標籤</p>"));
        $("p").bind("click", function () {
            alert("p被點了");
        });
        $("#dv").append($("<p>p標籤2</p>"));
    });

點擊 p標籤2 的時候不會彈出對話框。

示例2：

// delegate   
    $("#btn").click(function () {
        $("#dv").append($("<p>p標籤</p>"));
        $("#dv").delegate("p", "click", function () {
           alert("p被點了");
        });
        $("#dv").append($("<p>p標籤2</p>"));
    });

// on   
    $("#btn").click(function () {
        $("#dv").append($("<p>p標籤</p>"));
        $("#dv").on("click", "p", function () {
           alert("p被點了");
        });
        $("#dv").append($("<p>p標籤2</p>"));
    });

後添加的 p 標籤也會被綁定點擊事件。

3、解綁事件

用什麼方式綁定的事件，最好用什麼方式解綁事件。

一、bind 解綁事件

語法：

// 解綁單個或多個事件
綁定事件的元素.unbind("事件名1 事件名2 ...");
// 解綁全部的事件
綁定事件的元素.unbind();

PS：unbind 也能夠解綁 元素.事件名(事件處理函數) 方式的綁定事件。

二、delegate 解綁事件

語法：

// 解綁子元素單個或多個事件
父元素.undelegate("子元素", "事件1 事件2 ...");
// 解綁子元素的全部事件
父元素.undelegate();

下面的寫法是無效的：父元素.undelegate("子元素");，不能移除子元素的全部事件。

三、on 解綁事件

語法：

// 父元素和子元素的全部事件都會解綁
父元素.off();
// 父元素和子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...");

// 子元素的全部事件解綁
父元素.off("", "子元素"); 
// 子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...", "子元素"); 

// 父元素中全部的子元素的全部事件解綁
父元素.off("", "**"); 
// 父元素中全部的子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...", "**");

注意：子元素的全部事件解綁 。下面的寫法是無效的。父元素.off("子元素");