從零開始學 Web 之 jQuery(六)為元素綁定多個相同事件,解綁事件
阿新 • • 發佈:2018-07-11
png 好用 添加 方式 執行 存在 區別 也會 地址
大家好,這裏是「 從零開始學 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"); });
2、方式二
$("#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"); } });
二、元素綁定事件的區別
先說結論:通過調用事件名的方式和 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 標簽也會被綁定點擊事件。
三、解綁事件
用什麽方式綁定的事件,最好用什麽方式解綁事件。
1、bind 解綁事件
語法:
// 解綁單個或多個事件
綁定事件的元素.unbind("事件名1 事件名2 ...");
// 解綁所有的事件
綁定事件的元素.unbind();
PS:unbind 也可以解綁
元素.事件名(事件處理函數)
方式的綁定事件。
2、delegate 解綁事件
語法:
// 解綁子元素單個或多個事件
父元素.undelegate("子元素", "事件1 事件2 ...");
// 解綁子元素的所有事件
父元素.undelegate();
下面的寫法是無效的:
父元素.undelegate("子元素");
,不能移除子元素的所有事件。
3、on 解綁事件
語法:
// 父元素和子元素的所有事件都會解綁
父元素.off();
// 父元素和子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...");
// 子元素的所有事件解綁
父元素.off("", "子元素");
// 子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...", "子元素");
// 父元素中所有的子元素的所有事件解綁
父元素.off("", "**");
// 父元素中所有的子元素的單個或多個事件解綁
父元素.off("事件1 事件2 ...", "**");
註意:子元素的所有事件解綁 。下面的寫法是無效的。
父元素.off("子元素");
從零開始學 Web 之 jQuery(六)為元素綁定多個相同事件,解綁事件