`
backspace
  • 浏览: 132208 次
文章分类
社区版块
存档分类
最新评论

jQuery事件绑定.on()

 
阅读更多

前几天在看《jquery基础教程》,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的。

然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意。

看源码发现bind()和delegate()都是由on()实现的。on()的描述如下:

.on( events [, selector ] [, data ], handler(eventObject) )

一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。

在需要为较多的元素绑定事件的时候,优先考虑事件委托,可以带来性能上的好处。比如:

  

如上图,将click事件绑定在document对象上,页面上任何元素发生的click事件都冒泡到document对象上得到处理。

注意到.on()的描述中第二个可选参数:selector。如下图,添加了第二个参数,选择符button:

结果:

当事件冒泡到document对象时,检测事件的target,如果与传入的选择符(这里是button)匹配,就触发事件,否则不触发。

注意.on()也可以接收一个对象参数,该对象的属性是事件类型,属性值为事件处理函数。下面是官方文档的一个例子:

最后有一点,原先的live()方法,处理函数是默认绑定在document对象上不能变的,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法,事件只会绑定到$()函数的选择符表达式匹配的元素上(上面我的例子中,为了简单绑定到了document),因此可以精确地定位到页面中的一部分,而事件冒泡的开销也可以减少。delegate()与on()同理,毕竟是用on()实现的:

 

 

3
0
分享到:
评论

相关推荐

    jQuery事件绑定.on()简要概述及应用

    前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助

    Web前端开发技术-Jquery事件操作.pptx

    事件方法触发事件:jQuery中的事件方法在调用时如果传参数,表示绑定事件,如果不传参数,表示触发事件。;trigger()方法触发事件:使用trigger()方法可以触发指定事件。;triggerHandler()方法触发事件:...

    jquery.my.js

    用JavaScript原生封装的一个jQuery库,可供大家学习底层封装原理...子级关系,// siblings() 兄弟关系,eq() 是根据传入的索引获取到某个元素,index() 获取元素在父级中排第几索引, on() 给实例绑定事件用的核心方法

    jQuery事件绑定和委托实例

    jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。   有时我们可能会像下面这样绑定一个事件: 代码如下:$(“#div1”).click(function() {   alert(...

    jquery.ajax.progress:允许将事件处理程序绑定到 XHR2 上传下载进度事件

    jquery.ajax.progress 允许将事件处理程序绑定到 XHR2 上传/下载进度事件。 基于 nebirhos 脚本 ( ) 这些事件是: downloading和uploading downloading事件的示例代码: var jqXHR = $ . get ( '...

    jQuery-on-event-binding-polyfill:使用 .on() 方法(v1.7 之前)对旧版本的 jQuery 进行皮条客

    jQuery-on-event-binding-polyfill jQuery .on() 方法支持较旧(v1.7 ... [removed]jquery-on.min.js[removed] 注意:如果 jQuery.fn.on 方法已经存在,它不会使用新的 jQuery.fn.on 方法对 jQuery 进行monkeypatch。

    jQuery完全实例.rar

    This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, ...

    jQuery事件绑定on()与弹窗实现代码

    主要介绍了jQuery事件绑定on()与弹窗实现代码,需要的朋友可以参考下

    【JavaScript源代码】JQuery绑定事件四种实现方法解析.docx

    JQuery绑定事件四种实现方法解析  jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery...

    jQuery的事件预绑定

    预绑定主要是指jQuery中的.on()方法。 2. Demo HTML代码 <input type=button id=test value=test/> 一般的jQuery代码: $('#root').find('#test').on('click', function() { ... }); 预绑定的jQuery代码:...

    浅析jQuery事件之on()方法绑定多个选择器,多个事件

    下面小编就为大家带来一篇浅析jQuery事件之on()方法绑定多个选择器,多个事件。小编觉得挺不错的,现在分享给大家。也给大家做个参考

    jquery绑定事件 bind和on的用法与区别分析

    本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考,具体如下: bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类...

    JQuery中使用on方法绑定hover事件实例

    主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    脚本支持文件jQuery-UJS.zip

    UJS 是为 Ruby on Rail 框架开发的一个不起眼的脚本支持文件,但是它不会严格地绑定到任何特定的后端。你可以把它拖放到任何应用程序中,从而完成以下这些事情:确认对话框的各种操作从超链接获得 non-GET 请求使...

    jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在...

    jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天...

    JQuery 给元素绑定click事件多次执行的解决方法

    $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所...

    jquery移除了live()、die(),新版事件绑定on()、off()的方法

    使用了新的事件绑定方法on()、解除绑定方法off(). 新的绑定方法on()和比live()相比,效率比之前的高。因为live()是固定在document节点上的。如果绑定的元素嵌套在很深的层中,那么事件一级级的传递必将影响到效率。...

Global site tag (gtag.js) - Google Analytics