大家好，这里是「 从零开始学 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（六）为元素绑定多个相同事件，解绑事件
原文地址：https://www.cnblogs.com/lvonve/p/9296044.html