关于jQuery新的事件绑定机制on()的使用技巧
字体：[ ] 类型：转载 时间：
本篇文章介绍了，关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下
今天浏览jQuery的deprecated列表，发现live()和die()在里面了，赶紧看了一下，发现从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
替换bind()
当第二个参数'selector'为null时，on()和bind()其实在用法上基本上没有任何区别了，所以我们可以认为on()只是比bind()多了一个可选的'selector'参数，所以on()可以非常方便的换掉bind()
替换live()
在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面，当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单，它是通过document进行事件委派的，因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。
live()写法
代码如下:&$('#list li').live('click', '#list li', function() {&&& //function code here.}); on()写法 代码如下:$(document).on('click', '#list li', function() {&&& //function code here.});这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。
替换delegate()delegate()是1.4引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和live()优点相似。只不过live()是通过document元素委派，而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。
delegate()的写法 代码如下:$('#list').delegate('li', 'click', function() {&&& //function code here.});on()写法 代码如下:$('#list').on('click', 'li', function() {&&& //function code here.});貌似第一个和第二个参数的顺序颠倒了一下，别的基本一样。
总结jQuery推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery1.4 及之前的版本，由.click() 或 .bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！
旧版本的处理方法是使用.live()方法来代替事件绑定.bind()，使得绑定的事件能适用脚本创建的新元素。
但自jq1.7版本开始，官方已明文表示不再推荐使用使用.live()方法，官方解释为：live()调用过程首先将事件方法绑定到了Document，然后，查找Document里是否有匹配元素。 这个过程对于性能来说可能比较浪费。官方推荐将.live()改成Delegate()方法，适用脚本创建的新元素。
jq1.8开始，官方又再次申明：如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法。
本文将详细介绍jq1.8中.on()用法，相关用法源码如下：
&!--实例效果文字描述，可删--&
&div class=&demonstrate&&
&div class=&description&&
&h3&jq新版事件绑定.on()、解绑事件off()用法详解&/h3&
&p&年月日 星期 时分秒&/p&
&div id=&demo&&
&li&1 点我有3弹窗&/li&
&li&2 点我有3弹窗&/li&
&li&3 点我有3弹窗&/li&
&li&4 点我有3弹窗&/li&
&div style=&clear:&&
&a href=&javascript:;& class=&bind&&js-&添加一个li,添加的li也能响应之前绑定的事件！&/a&
&a href=&javascript:;& class=&unbindAllclick&&解绑li 所有click事件&/a&
&a href=&javascript:;& class=&unbindSpecifyclick&&解绑li 指定事件函数的click事件2&/a&
&a href=&javascript:;& class=&unbindNamespace&&解绑li 同一命名空间中的click事件2、mouseout事件&/a&
&script type=&text/javascript&&
// js创建新元素
$(&.bind&).on(&click&,function(){
$(&ul&).append(&&li/&&);
var temp=$(&ul li&).last();
temp.html($(&ul li&).length +&响应点击事件？&);
// 旧版写法: 事件不能适用脚本创建的新元素
// $(&ul li&).bind(&click&,function(){
alert(&不响应事件!&);
// 旧版事件.live()：适用脚本创建的新元素写法,live()调用过程如下：我们首先将click方法绑定到了Document，然后，查找Document里是否有这个元素。 这个过程对于性能来说可能比较浪费
// $(&ul li&).live(&click&,function(){
alert(&响应事件!&);
// 新版写法一：单纯将bind改成on，事件不能适用脚本创建的新元素
// $(&ul li&).on(&click&,function(){
alert(&不响应事件!&);
// 新版写法二：将live改成Delegate，适用脚本创建的新元素
// $(&.demonstrate&).delegate(&ul li&,&click&,function(){
alert(&响应事件!&);
// 新版写法三：适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
// $(ele).on() ele 为匹配元素的父元素，可指定为document/body ,但从查找document/body向下检索匹配元素这个过程对于性能来说，比较浪费，推荐定成匹配元素就近的父元素！！
//如果你开发最新版本的jQuery，完全可以使用on()方法来处理所有的事件绑定，避免过多的方法调用,因为其实在最新版本的jQuery类库中，所有以上旧版方法在后面其实都是调用on()方法
$(&.demonstrate&).on(&click&,&ul li&,function(e){
alert(&响应&+e.type+&事件1!&);
$(&.demonstrate&).on(&click.namespace&,&ul li&,eventFunc=function(e){
alert(&响应&+e.type+&事件2!&);
$(&.demonstrate&).on(&mouseout.namespace&,&ul li&,function(e){
alert(&响应&+e.type+&事件!&);
// 新版多事件同时绑定写法
//$(&.demonstrate&).on({
// mouseover:function(){
// $(this).addClass(&over&);
// mouseout:function(){
// $(this).removeClass(&over&);
//},&ul li&)
//$(&.demonstrate&).on(&mouseover mouseout&,&ul li&,function(e){
// if(e.type==&mouseover&){
$(this).addClass(&over&);
$(this).removeClass(&over&);
// 新版解绑事件写法: 可同时解绑多个事件 空格分隔开各个事件
// 解绑所有点击事件
$(&.unbindAllclick&).click(function(){
$(&.demonstrate&).off('click',&ul li&);
// 事件函数：可解绑指定事件函数的同类事件,第3个参数：事件函数 (不需要引号)
$(&.unbindSpecifyclick&).click(function(){
$(&.demonstrate&).off('click',&ul li&,eventFunc);
// 命名空间：解绑同一命名空间中的多类（如click、mouseout等）事件,第1个参数可直接简写命名空间即可，或写成&click.namespace mouseout.namespace&全写形式
$(&.unbindNamespace&).click(function(){
$(&.demonstrate&).off('.namespace',&ul li&);
本文已收录于以下专栏：
相关文章推荐
jquery on()方法是jquery1.7+后才使用的
由于需求：动态添加了以下代码
jquery1.4 及之前的版本，由.click() 或 .bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！
旧版本的处理...
事件使得客户端的 JavaScript 有机会被激活，并得以运行。在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来，...
我是button
事件的绑定：on()
基本用法：.on( events ,[ selector ] ,[ data ] )
事件的解绑：off()
基本用法：.off( events)
off用于移除on方法绑定的事件，one方法绑定的事件只会被触发一次，live、die方法在1.9的版本中被移除。
　　因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该...
看了李炎恢老师的视频，这三个方法是可以代替之前的绑定和事件委托的，之前的笔记是用来作为铺垫，方便这次的学习！
我现在前面记录下我们原先的事件绑定
普通的绑定 .bind
普通的解绑.unbind...
jQuery 1.7开始，on()方法提供绑定事件处理程序所需的所有功能，是 bind()、live() 和 delegate() 方法的新的替代品。live() 方法在 jQuery 版本 1.7 ...
一. 事件委托
什么是事件委托？用现实中的理解就是：有100 个学生同时在某天中午收到快递，但这
100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。
而在jQu...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2853人阅读
jquery（27）
JQuery从1.7+版本开始，提供了on()和off()，进行事件处理函数的绑定和取消。这2个API与JQuery最初提供的bind()和unbind()有很多相似的地方，也有一些不同之处。bind和unbind的详细介绍，可以参考。
on()和bind()的函数签名如下：
bind(type, [data], fn)
on(type,[selector],[data],fn)
可以看到2个函数的区别在于：是否支持selector这个参数值。由于javascript的事件冒泡特性，如果我们在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。如果使用on的时候，不设置selector，那么on与bind就没有区别了。
&div id=&parent&&
&input type=&button& value=&a& id=&a&/&
&input type=&button& value=&b& id=&b&/&
上面这段代码，如果我们使用bind()在parent上绑定了click事件处理函数，当点击a或者b按钮的时候，都会执行事件处理函数。如果我们希望点击a的时候触发，点击b的时候不触发，那么可以使用on，代码如下：
$(&#parent&).on(&click&,&#a&,function(){
alert($(this).attr(&id&));
可以看到：on()函数的参数selector就是为了在事件冒泡的时候，让父元素能够过滤掉子元素上发生的事件。如果使用了bind，那么就没有这个能力，子元素上发生的事件一定会触发父元素事件。
还有一点需要注意：on绑定的事件处理函数，对于未来新增的元素一样可以，和delegate效果相同，而bind则不行。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：854096次
积分：11439
积分：11439
排名：第1437名
原创：335篇
评论：185条
(5)(11)(15)(8)(2)(2)(1)(9)(7)(1)(7)(5)(22)(17)(14)(16)(2)(3)(9)(10)(6)(13)(9)(16)(3)(16)(17)(29)(9)(10)(3)(7)(19)(9)(1)(3)(1)(2)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
第一章 JavaScript （基础）
第二章 JavaScript（高级）