文档章节

JQuery中的bind、delegate、on、live方法的区别及简单介绍

xing240
 xing240
发布于 2014/02/20 21:36
字数 1371
阅读 2937
收藏 6

Bind()方法:

给元素绑定事件

形式:

.bind(eventType[,eventData],handler(eventObject))

eventType,string类型,一个或多个DOM事件的名称,比如:clicksubmit

eventData,Object,将会传递给handler函数的数据,也就是eventObject的data属性中,如果要调用那么使用eventObject.data

Handlerfunction,当事件被触发时执行的函数

 

.bind(eventType[,eventData][,preventBubble])

eventType,string,一个或多个DOM事件的名称,比如:click、submit

eventData,Object,将会传递给handler函数的数据,也就是eventObject的data属性中,如果要调用那么使用eventObject.data

preventBubble,boolean,默认为true,当设置为false的时候将阻止浏览器默认事件发生,并且阻止事件冒泡。.

 

.bind(events)

Events,object,使用json的形式,为当前元素定义多个事件,例如:

{

click: function() {

$( this ).addClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

}

说明:

bind可以给当前存在的节点添加事件,即便使用标签选择器选择一类标签,但是也不能给新加的标签绑定目标时间。当只是简单的给固定的元素绑定事件时,可以使用该方法。但是如果是较为复杂的会动态添加执行事件元素的情况下,bind方法不适用。

bind中定义的evnetType,可以是任意的字符串,各个字符串用空格隔开,当该字符串是默认是DOM事件时,调用DOM事件,如果是不默认的DOM事件,那么就调用自定义事件,这些自定义事件不会被浏览器触发。但是可以通过trigger()方法手动触发。

evnetType中包含"."的时候,.后边的字符串表示命名空间,也就是当前事件绑定在某命名空间中,那么命名空间中的事件不会影响其他事件,对于命名了解不深所以对于这块有更深的了解后再说明。

对于一个元素可以bind多个同一事件,事件触发按照绑定的顺序触发。

handler事件中可以使用this关键词来表示触发当前事件的当前DOM对象,注意是DOM对象不是JQuery对象,要转化为JQuery对象使用$(this)

 

Live()方法:

该方法已经在Jquery 1.7不推荐使用,1.9中删除。可以使用on()、delegate()方法替代。

不使用live()方法的原因:

1live方法执行需要先通过选择器选择元素,而在大文档中,会耗费大量时间在选择特定元素的操作上。

2live()方法不支持链接使用,例如 $( "a" ).find( ".offsite, .external" ).live(... );不能很好的工作。

3,由于所有的live()事件都附着到document对象上,事件会在执行前通过最远、最慢的传播路径。

4,移动设备上click时间不会产生冒泡,所以live()方法不会起作用。

还有其他原因。所以live事件已经被删除了。

 

Delegate()方法:

该方法可以基于某些特定元素(通过选择器得到),附加一个或多个事件到特定元素内部选择器指定的元素上,无论选择出的目标元素是当前存在还是将来创建。

 

形式:

.deletgate(selector,evnetType,handler(evnetObject))

selectorstring,用来过滤触发事件的元素,即目标元素。

eventTypestring,与bind中介绍的eventType一样,多个事件只用空格隔开。

Handler(eventObject),被触发的事件。

 

.delegate(selector,eventType,eventData,handler(eventObject))

selectorstring,用来过滤触发事件的元素,即目标元素。

eventTypestring,与bind中介绍的eventType一样,多个事件只用空格隔开。

eventData,Object,将会传递给handler函数的数据,也就是eventObject的data属性中,如果要调用那么使用eventObject.data

Handler(eventObject),被触发的事件。

 

.delegate(selector,events):

selectorstring,用来过滤触发事件的元素,即目标元素。

Events,object,

使用json的形式,为当前元素定义多个事件,例如:

{

click: function() {

$( this ).addClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

}

说明:

JQuery1.7之后delegate已经被on取代,在1.4-1.7之间,delegate任然是最有效的给元素绑定事件的方式。

 

on方法(JQuery推荐使用)

附加一个事件处理函数的一个或多个事件到选定的元素,无论选择出的目标元素是当前存在还是将来创建。

形式:

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

Events,string,事件名,可以是空格隔开的多个事件也可是带有命名空间的事件。Click submit  click.myPlugin

Selector,string,用来指明调用on方法的JQuery对象的特殊子元素,如果没有指定那么就是绑定到调用on方法的JQuery对象。

dataobject,通过eventObject.data传递到触发事件中的数据

Handler(eventObject),被触发的函数,这里也可以使用falsefalse==returnfalse

 

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

Events,object,

使用json的形式,为当前元素定义多个事件,例如:

{

click: function() {

$( this ).addClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

}

Selector,string,用来指明调用on方法的JQuery对象的特殊子元素,如果没有指定那么就是绑定到调用on方法的JQuery对象

Data,object,通过eventObject.data传递到触发事件中的数据

 

说明:

on方法是当前JQuery推荐使用的事件绑定方法,相反方法是off(),附加只运行一次就删除函数的方法是one()


本文转载自:http://blog.csdn.net/li_xiao_dai/article/details/19203859

xing240
粉丝 1
博文 19
码字总数 2303
作品 0
广州
程序员
私信 提问
关于jQuery新的事件绑定机制on()的使用技巧

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引...

Idiot_s_Sky
2014/01/11
133
0
jQuery的.bind()、.live()和.delegate()之间区别

摘要:jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交...

i33
2012/09/20
83
0
jQuery中的.bind()、.live()和.delegate()之间区别分析

jQuery中的.bind()、.live()和.delegate()之间区别分析: DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击...

freedonn
2014/02/27
21
0
jQuery中的.bind()、.live()和.delegate()之间区别分析

jQuery中的.bind()、.live()和.delegate()之间区别分析,学习jquery的朋友可以参考下。 DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子: 事件...

吟啸_徐行
2014/02/20
40
0
jQuery新的事件绑定机制on()

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有...

随智阔
2013/07/08
98
0

没有更多内容

加载失败,请刷新页面

加载更多

html2canvas 生成的图片变模糊解决方案

需求: 背景图片和二维码还有用户微信头像生成一张图片,可供用户下载。打开页面的时候就是一张图可以保存,html2canvas插件即可实现效果,效果是实现了,但是很郁闷,图片模糊了。。。。 为...

前端老手
11分钟前
3
0
语音翻译器在线翻译语音

对于英语不好的朋友来说,如果出国旅游,多多少少都会使用到翻译软件。通过在线翻译的方式,方便彼此的沟通交流。那么,有朋友就在问哪个英语翻译软件最准确?下面就来和大家一起分享下这个简...

401恶户
12分钟前
2
0
国内25家滤波器公司排名

国内做滤波器的企业都有哪些?哪些企业做滤波器是比较知名的?国内滤波器企业排名如何?以下是解优人才网小编给大家的分享,国内前25家做滤波器的企业详细信息。 1、武汉凡谷电子技术股份有限...

猎头悬赏平台
17分钟前
4
0
即时配送,不再只是巨头的战场

9月4日,第十届中国电子商务物流大会暨2019中国同城即时物流行业峰会于杭州召开。会上出现了蜂鸟即配、达达-京东到家、美团配送、点我达、闪送等一众即时配送行业中的知名企业的身影。 在艾媒...

喵二狸
17分钟前
3
0
Moto G 2014 LTE Root

[TOC] 下载moto专用mfastboot mfastboot-v2.zip 下载对应设备的twrp 我的是这个版本 Moto G 2014 LTE thea 刷入twrp # 1. 开启USE调试# 2. 允许OEM解锁# 3. 查看设备adb devices# 4. 进f...

yeahlife
21分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部