一. 事件委托
什么是事件委托？用现实中的理解就是：有100 个学生同时在某天中午收到快递，但这100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。而在jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行相关处理即可。如果一个企业级应用做报表处理，表格有2000 行，每一行都有一个按钮处理。如果用之前的.bind()处理，那么就需要绑定2000 个事件，就好比2000 个学生同时站在学校门口等快递，不断会堵塞路口，还会发生各种意外。这种情况放到页面上也是一样，可能导致页面极度变慢或直接异常。而且，2000 个按钮使用ajax 分页的话，.bind()方法无法动态绑定尚未存在的元素。就好比，新转学的学生，快递员无法验证他的身份，就可能收不到快递。
//HTML 部分
<div style="background:red;width:200px;height:200px;" id="box"><input type="button" value="按钮" class="button" /></div>//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成$('.button').bind('click', function () { $(this).clone().appendTo('#box');});//使用.live()具备动态绑定功能，jQuery1.3 使用，jQuery1.7 之后废弃，jQuery1.9 删除$('.button').live('click', function () { $(this).clone().appendTo('#box');});.live()原理就是把click 事件绑定到祖先元素$(document)上，而只需要给$(document)绑定一次即可，而非2000 次。然后就可以处理后续动态加载的按钮的单击事件。在接受任何事件时，$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，如果click事件是.button，那么就执行委托给它的处理程序。.live()方法已经被删除，无法使用了。需要测试使用的话，需要引入向下兼容插件。//.live()无法使用链接连缀调用，因为参数的特性导致$('#box').children(0).live('click', function () { $(this).clone().appendTo('#box');});在上面的例子中，我们使用了.clone()克隆。其实如果想把事件行为复制过来，我们只需要传递true 即可：.clone(true)。这样也能实现类似事件委托的功能，但原理却截然不同。一个是复制事件行为，一个是事件委托。而在非克隆操作下，此类功能只能使用事件委托。$('.button').live('click', function () { $('<input type="button" value="复制的" class="button" />').appendTo('#box');});当我们需要停止事件委托的时候，可以使用.die()来取消掉。$('.button').die('click');由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中被.on()方法整合替代了。$('#box').delegate('.button', 'click', function () { $(this).clone().appendTo('#box');});$('#box').undelegate('.button','click');//支持连缀调用方式$('div').first().delegate('.button', 'click', function () { $(this).clone().appendTo('div:first');}); 注意：.delegate()需要指定父元素，然后第一个参数是当前元素，第二个参数是事件方式，第三个参数是执行函数。和.bind()方法一样，可以传递额外参数。.undelegate()和.unbind()方法一样可以直接删除所有事件，比如：.undelegate('click')。也可以删除命名空间的事件，比如：.undelegate('click.abc')。注意：.live()和.delegate()和.bind()方法一样都是事件绑定，那么区别也很明显，用途上遵循两个规则：1.在DOM 中很多元素绑定相同事件时；2.在DOM 中尚不存在即将生成的元素绑定事件时；我们推荐使用事件委托的绑定方式，否则推荐使用.bind()的普通绑定。 二．on、off 和one目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，为此jQuery1.7 以后推出了.on()和.off()方法彻底摒弃前面三组。//替代.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 () { alert('替代.bind()移入移出！');});//替代.bind()方式，以对象模式绑定多个事件$('.button').on({ mouseover : function () { alert('替代.bind()移入！');},mouseout : function () { alert('替代.bind()移出！');}});//替代.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').off('click');$('.button').off('click', fn);$('.button').off('click.abc');//替代.live()和.delegate()，事件委托$('#box').on('click', '.button', function () { $(this).clone().appendTo('#box');});//替代.die()和.undelegate()，取消事件委托$('#box').off('click', '.button');注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、命名空间等等，这里不在赘述。不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。//类似于.bind()只触发一次$('.button').one('click', function () { alert('one 仅触发一次！');});//类似于.delegate()只触发一次$('#box).one('click', 'click', function () { alert('one 仅触发一次！');});
三:例子:
Title AAA
AAA
AAA
AAA
AAA
结果:红线圈的点击可以弹框
改进:使on可以委托(js加的也起作用)
先将事件绑定到body身上再过滤到.me4(也就是事件在class为me4身上)
$('body').on('click','.me4', function () { alert("jQuery on绑定事件."); });
改进:on绑定多个事件并进行委托：
参数中写多个事件，根据事件类型进行判断(下面效果是实现hover()函数)
$("body").on("mouseover mouseout",'.el_unflod',function(event){ if(event.type == "mouseover"){ // 鼠标悬浮 alert("鼠标悬停") }else if(event.type == "mouseout"){ // 鼠标离开 }})
四:总结
bind:绑定事件，页面初始化绑定，可以同时绑定多个，JS动态添加的元素不起作用。而且用unbind()去掉事件只能去掉bind绑定的事件，对于标签种写的onclick属性之类的事件需要调用removeAttr删除属性才可以去掉事件，切记在bind事件之前去掉元素的onclick属性等事件。
onclick: 绑定事件，页面初始化绑定，一次绑定一个，JS动态添加的元素不起作用,bind的简便写法
live: 事件委托，也是事件绑定，JS动态加入的元素仍然起作用(事件委托:动态添加的元素仍然有事件)
on: 绑定事件，也是绑定事件(功能更强大),运用上述方法可以实现委托，动态添加的元素仍然有事件。
返回值:jQueryon(events,[selector],[data],fn)概述在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()参数events,[selector],[data],fnV1.7events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。events-map,[selector],[data]V1.7events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。
参考: