事件委托
什么是事件委托？用现实中的理解就是：有100个学生同时在某天中午收到快递，但这100个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。而在jQuery中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行相关处理即可。
如果一个企业级应用做报表处理，表格有2000行，每一行都有一个按钮处理。如果用之前的.bind()处理，那么就需要绑定2000个事件，就好比2000个学生同时站在学校门口等
快递，不但会堵塞路口，还会发生各种意外。这种情况放到页面上也是一样，可能导致页面极度变慢或直接异常。而且2000个按钮使用ajax分页的话，.bind()方法无法动态绑定尚
未存在的元素。就好比，新转学的学生，快递员无法验证他的身份，就可能收不到快递。
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高级事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style=" 200px; height: 200px; background: green;" id="box"> <input type="button" class="button" value="按钮" /> </div> </body> </html>
使用.bind()绑定一个事件：
$(".button").bind("click", function() {
alert("事件不委托！");
});
也可使用.live()绑定一个事件：
$(".button").live("click", function() {
alert("事件委托！");
});
但要注意：使用live绑定的是document，而非button，所以永远只会绑定一次事件！
使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成：
//bind无法动态绑定事件 $(".button").bind("click", function() { $(this).clone().appendTo("#box"); });
使用.live()具备动态绑定功能，jQuery1.3使用，jQuery1.7之后废弃，jQuery1.9删除，所以还需引入向下兼容插件——jquery-migrate-1.2.1.js
//live可以动态绑定事件，因为事件绑定在document上 $(".button").live("click", function() { $(this).clone().appendTo("#box"); });
.live()原理就是把click事件绑定到祖先元素$(document)上，而只需要给$(document)绑定一次即可，而非2000次，然后就可以处理后续动态加载的按钮的单击事件。在接受任何事件时，$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，如果click事件是.button，那么就执行委托给它的处理程序，.live()方法已经被删除，无法使用了，需要测试使用的话，需要引入向下兼容插件。
一句话总结：live绑定在document上，而点击button其实是冒泡到document上，并且点击document时候，需要验证event.type和event.target才能触发。
.live()无法使用链接连缀调用，因为参数的特性导致。即下列代码无效：
//live是不支持元素连缀调用的 $("#box").children(0).live("click", function() { $(this).clone().appendTo("#box"); });
在上面的例子中，我们使用了.clone()克隆。其实如果想把事件行为复制过来，我们只需要传递true即可：.clone(true)，这样也能实现类似事件委托的功能，但原理却截然不同，一个是复制事件行为，一个是事件委托，而在非克隆操作下，此类功能只能使用事件委托。
$(".button").bind("click", function() {
$(this).clone(true).appendTo("#box"); //其实是复制事件行为
});
在非克隆操作下，此类功能只能使用事件委托：
$(".button").live("click", function() {
$('<input type="button" class="button" value="按钮" />').appendTo("#box");
});
或
$(".button").live("click", function() {
$('<input type="button" class="button" value="按钮" />').clone(true).appendTo("#box");
});
又或
$(".button").live("click", function() {
$('<input type="button" class="button" value="按钮" />').clone().appendTo("#box");
});
如果使用.bind()复制事件行为，则无法动态绑定：
$(".button").bind("click", function() {
$('<input type="button" class="button" value="按钮" />').clone(true).appendTo("#box");
});
当我们需要停止事件委托的时候，可以使用.die()来取消掉。
$(".button").live("click", function() {
$(this).clone().appendTo("#box");
});
$(".button").die("click"); //和unbind一个意思
由于.live()和.die()在jQuery1.4.3版本中废弃了，之后推出语义清晰、 减少冒泡传播层次、又支持链接连缀调用方式的方法：.delegate()和.undelegate()，但这个方法在 jQuery1.7版本中被.on()方法整合替代了。
$("#box").delegate(".button", "click", function() {
$(this).clone().appendTo("#box");
});
$("#box").undelegate(".button", "click");
live的替代方法delegate()，live语义不清晰，由于它没有指定绑定谁，所以不清晰；而delegate语义清晰，绑定谁，谁就在开头。
支持连缀调用方式：
$("div").first().delegate(".button", "click", function() {
$(this).clone().appendTo("div:first");
});
注意：.delegate()需要指定父元素，然后第一个参数是当前元素，第二个参数是事件方式，第三个参数是执行函数。和.bind()方法一样，可以传递额外参数，.undelegate()和.unbind()方法一样可以直接删除所有事件，比如：.undelegate('click')，也可以删除命名空间的事件，比如：.undelegate('click.abc')。
注意：.live()和.delegate()和.bind()方法一样都是事件绑定，那么区别也很明显，用途上遵循两个规则：
- 在DOM中很多元素绑定相同事件时
- 在DOM中尚不存在即将生成的元素绑定事件时。
我们推荐使用事件委托的绑定方式，否则推荐使用.bind()的普通绑定。
on、off和one
目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，为此jQuery1.7以后推出了.on()和.off()方法彻底摒弃前面三组。
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高级事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style=" 200px; height: 200px; background: green;" id="box"> <input type="button" class="button" value="按钮" /> </div> </body> </html>
替代.bind()方式：
$(".button").on("click", function() {
alert("替代bind");
});
替代.bind()方式，并使用额外数据和事件对象：
$(".button").on("click", {user:'Lee'}, function(e) {
alert("替代bind" + e.data.user);
});
替代.bind()方式，并绑定多个事件：
$(".button").on("mouseover mouseout", function(e) {
alert("移入移出");
});
替代.bind()方式，以对象模式绑定多个事件：
$(".button").on({
mouseover:function() {
alert("移入");
},
mouseout:function() {
alert("移出");
}
});
又html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高级事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="123.html"> <div style=" 200px; height: 200px; background: green;" id="box"> <input type="submit" class="button" value="按钮" /> </div> </form> </body> </html>
替代.bind()方式，阻止默认行为并取消冒泡：
$("form").on("submit", function() {
return false;
});
或
$("form").on("submit", false);
替代.bind()方式，阻止默认行为：
$('form').on('submit', function (e) {
e.preventDefault();
});
替代.bind()方式，取消冒泡：
$('form').on('submit', function (e) {
e.stopPropagation();
});
替代.unbind()方式，移除事件：
$(".button").on("click", function() {
alert("替代bind");
});
$(".button").off("click");
替代.live()和.delegate()，事件委托：
$("#box").on("click",".button",function() {
$(this).clone().appendTo("#box");
});
替代.die()和.undelegate()，取消事件委托：
//替代.live .delegate $("#box").on("click",".button",function() { $(this).clone().appendTo("#box"); }); //移除事件委托 $("#box").off("click",".button");
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，one()方法仅触发一次事件。
类似于.bind()只触发一次：
//仅一次事件触发 $(".button").one("click", function() { alert("仅一次事件触发"); });
类似于.delegate()只触发一次：
$("#box").one("click",".button",function() {
$(this).clone().appendTo("#box");
});