jquery中delegate,jQuery中delegate方法内部调用了on方法

http://www.itjxue.com  2023-01-04 15:42  来源:未知  点击次数: 

jQuery事件绑定方法bind,live,delegate和on的区别

bind是用来绑定一个或多个事件的,live其实bind的一个加强版,用来绑定通过JavaScript或者jQuery添加的DOM元素事件,其语法结构是一样

123456$("p").bind("mouseenter mouseleave",function(){alert("ok");})$("p").live("mouseenter mouseleave",function(){alert("ok");})

delegate用于事件委托,也是绑定过JavaScript或者jQuery添加的DOM元素事件。

123$("div").delegate("p","click",function(){alert("p");})

点击div下面的P执行alert;

而on是在1.7之后新增的,是把bind,live,delegate全部合并在一起了,

123$("div").on("click","p",function(){ alert(1); })

不需要事件委托的时候把P去掉就会变成点击div触发了。

个人建议根据版本来使用,语法其实都差不多,如果你是用1.7版本以上就建议用on,毕竟bind,live,delegate这些将来都会遗弃了,如有错误,请指出。顺便吐槽一下楼上的回答,不走心啊

jQuery中的.on和.delegate的区别

两者区别是seleter和events顺序不同

delegate和on方法被选元素的子元素必须是"合法的"子元素。on(events,[selector],[data],fn),参数[selector]是可选,

一个选择器字符串用于过滤器的触发事件的选择器元素的后代。

delegate的selector是必需的。

jQuery中delegate和on的用法与区别详细解析

本篇文章主要是对jQuery中delegate和on的用法与区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

在jQuery1.7中

.delegate()已被.on()取代。对于早期版本,它仍然使用事件委托的最有效手段。

在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。

.delegate()

指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

代码如下:

//

jQuery

1.4.3+

$(

elements

).delegate(

selector,

events,

data,

handler

);

//

jQuery

1.7+

$(

elements

).on(

events,

[selector],

data,

handler

);

例如:.delegate()

code:

代码如下:

$("table").delegate("td","click",function(){

alert("hello");

});

.on()

code:

代码如下:

$("table").on("click",

"td",

function()

{

alert("hi");

});

PS:

两者区别是seleter和events顺序不同

delegate和on方法被选元素的子元素必须是"合法的"子元素。比如

复制代码

代码如下:

$("table").delegate("button","click",function(){...});

$("table").on("click",

"p",

function(){...});

就不起作用,因为正常情况下,table子元素应为tr,td...

on(events,[selector],[data],fn),参数[selector]是可选,

一个选择器字符串用于过滤器的触发事件的选择器元素的后代。

例如:

代码如下:

$("table").on("click",

".td1",

function()

{

alert("hi");

});

过滤class为td1的table子元素

而delegate的selector是必需的。

jquery中的delegate函数有什么作用

$("p").delegate("body", "click", function(){

alert("P元素的CLICK事件!");

});

这个代码的意思是向Body元素下面的已有P元素以及未来被添加到body的P元素添加click事件。

$("body").append("p后追加的p元素/p");

此时这个被添加的p元素也会被绑定上之前代码上的那个click事件,不必再手动绑定。

但是本人并不推荐用delegate的方式给元素绑定事件处理函数,他的原理是在body(参数第一个传的是啥就是啥)绑定click(第二个参数传的是啥就是啥)事件

,然后判定触发当前click的事件是否符合当前绑定的选择器(即代码示例中的$("p")),如果符合,再回调你的click函数。也就是说这个方式绑定的click事件并非是直接绑定到p(代码写的是啥就是啥)元素上的,而是body上的,性能差,一旦用这种方式给10种dom绑定click事件,那么他肯定会有一个队列保存这10种选择器,当你触发一个click事件时会用一个循环去判断是否满足这10种dom中的具体哪一种而后再回调具体的事件处理函数。而且还有个问题就是他有些事件并不支持这样绑定。所以除了万不得已不推荐这样写。

jQuery的.bind,live和.delegate之间的区别

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些;

4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+。

结论:如果项目中引用的jquery版本为低版本,推荐用delegate(),如果是高版本jquery则建议用on()。

(责任编辑:IT教学网)

更多

推荐word文章