发表于: 2017-06-01 21:05:03

1 1219


今天完成的事情:

JS-4

小课堂

JQUERY中的BIND(),LIVE(),DELEGATE(),ON()有什么区别?

 

分享人:覃腾波

目录

 

1.背景介绍

 

2.知识剖析

 

3.常见问题

 

4.解决方案

 

5.编码实战

 

6.扩展思考

 

7.参考文献

 

8.更多讨论

 

1.       背景介绍

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。因为任务中或者以后的项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind()live()delegate()on()的区别,以便以后查阅,也希望能帮到大家。

2.       知识剖析

 a.  四种函数介绍

  

    .bind()

bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。执行bind()时,事件处理函数会绑定到每个匹配元素上。因此你使用bind()所有button元素绑定了click事件,是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素,绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效,请使用on()delegate()live()等事件函数(尽量优先使用靠前的事件函数)

.live()

live()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。即使是执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。此外,可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

. delegate()

delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。即使是执行delegate()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数仍然对其有效。此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

.on()

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind() delegate() live()等事件函数。on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。


 b.归纳区别

1)用法不同

         $(selector).bind(event,data,function)

         $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替

         $(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;

         $(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind()live()绑定事件方式;

         2)绑定方式不同

         .bind()是直接绑定在元素上。

         .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

         .delegate()则是更精确的小范围使用事件代理,性能优于.live()。

         .on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制。

   3)对元素的支持度不同

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

        4)删除方法不同

   要删除通过bind()绑定的事件,请使用unbind()函数。

   要删除通过live()绑定的事件,请使用die()函数。

   要删除通过delegate()绑定的事件,请使用undelegate()函数。

   要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。

3.       常见问题

 这四种函数如何去选择使用

4.       解决方案

 使用.bind()方法是很浪费资源的,因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。

    .delegate()方法“很划算”用来处理性能和响应动态添加元素的时候。

 新的.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能,

 建议使用.on()方法,如果你的项目使用了1.7+jQuery的话,因为它是整合前三种方法的新事件绑定机制。

5.       编码实战

   http://runjs.cn/code/eza7hrou

6.       扩展思考

 什么是事件冒泡?

 事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,即子级元素先触发,父级元素后触发。假设一个元素div,  它有一个下级元素p

<div>

  <p>元素</p>

</div>

 这两个元素都绑定了click事件,如果用户点击了p,它在divp上都触发了click事件。p先触发,div后触发。这就叫做事件冒泡。

7.       参考文献

   http://www.365mini.com/page/jquery-delegate.htm

8.       更多讨论

 这四个函数还有哪些用法?或者说还可以传入哪些参数?


明天计划的事情:

学习懒加载,完成任务7

遇到的问题:

暂无

收获:

弄清楚了bind()live()delegate()on()的区别,学会了小课堂的制作。


返回列表 返回列表
评论

    分享到