jQuery中四个绑定事件的区别 on,bind,live,delegate
1.jQ操作DOM元素的绑定事件的四种方式
jQ中提供了四种事件监听方式,bind、live、delegate、on,对应的解除监听的函数分别是unbind,die,undelegate,off
2.bind
$(selector).bind(event,data,function)
event:事件,必选,一个或多个事件;data:参数,可选; fn:绑定事件发生时执行的函数,必选
bind()是最直接的,存在最久的绑定方法
优点:兼容性好,任何浏览器都可以使用
缺点:它会绑定事件到所有的目标元素上,有一个绑定一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个元素,点击它是没有反应的,必须再bind一次才执行,所以效率不太高。
3.live
$(selector).live(event,data,function)
这个方法用到了事件委托的概念来处理事件的绑定
优点:这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的
元素挨个绑定,动态添加的元素仍然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上
4.delegate
$(selector).delegate(childSelector,event,data,function)
childSelector:selector的子元素,必须写的
优点:可以选择把这个事件放在哪个元素上,需要迭代查找所有的selector/event data 来决定哪个子元素来匹配
缺点:需要查找绑定的子元素,尽管比document少很多了,不过,你还是得浪费时间来查找。
5.on
其实.bind(),.live(),.delegate()都是通过.on()来实现的,.unbind(),.die(),.undelegate(),也是一样的都是通过.off()来实现的。
优点:提供了一种统一绑定事件的方法
缺点:也许会对你产生一些困扰,因为它隐藏了前面我们所介绍的三种方法的细节
6.四种方式的异同和优缺点
相同点:1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式,将事件传递到document进行事件的响应
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持对动态新添加元素的事件设置;
2.bind()支持jQ所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;
3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和css选择器支持方面比delegate()差些
7.结论
用.bind(),把相同的一个事件处理机制用到所有匹配的DOM元素上;多事件处理:用空格分隔 $(selector).bind("click dbclick mouseout",data,function);
live()已经被淘汰了
.delegate()会提供很好的方法来提高效率,同时可以添加到动态创建的元素上
.on()是整合了之前的3中方式的新事件绑定机制,我们可以用.on()来代替上述的3种方法
参考文献:https://www.cnblogs.com/cxying93/p/6099496.html
jQuery中四个绑定事件的区别 on,bind,live,delegate的更多相关文章
- jQuery中ready与load事件的区别
1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...
- jquery中mouseout和mouseleave 事件的区别
今天用jQuery写了一个选项卡的效果,用mouseout事件控制了鼠标的移出,结果发现在移出时div会发生闪动,于是网上各种查资料觉得用mouseleave更合适一些,
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
- jQuery中ready与load事件
jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...
- JS---DOM---总结绑定事件的区别
总结绑定事件的区别: addEventListener(); attachEvent() 相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventListen ...
- jQuery如何给body绑定事件?
jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jquery中的$().each和$.each的区别
jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...
随机推荐
- CF449D Jzzhu and Numbers
题解 刚刚学习了高维前缀和 这道题就肥肠简单了 高维前缀和其实原理肥肠简单 就是每次只考虑一维,然后只做这一维的前缀和 最后求出的就是总前缀和了 那么对于这道题 也就很简单了 发现选择的所有数每一位都 ...
- Person p = new Person("zhangsan",20);该句话都做了什么事情?
1,因为new用到了Person.class.所以会先找到Person.class文件并加载到内存中.2,执行该类中的static代码块,如果有的话,给Person.class类进行初始化.3,在堆内 ...
- windows系统下在忘记安装make的Cygwin中如何正确安装make(图文详解)
由于我在安装cygwin时忘了包含make包,所以安装后发现我在bash中无法使用make命令.但是一般在cygwin下面的软件都是要用make来实现编译和安装的.没有make,又如何编译生成make ...
- js中,浏览器中不同元素位置属性解析
offset() 只对可见元素有效,获取匹配元素在当前视口的相对偏移,返回的对象有两个整型属性,top和left,像素计算: position() 相对父元素的偏移,position.left ...
- 前端:常见的6种HTML5错误用法
一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样 ...
- Rxlifecycle使用详解,解决RxJava内存泄露问题
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/1122/3711.html
- cmanformat - 不是命令啦,是个演示文件
描述 DESCRIPTION cmanformat 是 man pages 格式的演示文件. 由于系统不同会有差异.在 XWindow 下会好些. __________________________ ...
- BEGIN - 开始一个事务块
SYNOPSIS BEGIN [ WORK | TRANSACTION ] DESCRIPTION 描述 BEGIN 初始化一个事务块, 也就是说所有 BEGIN 命令后的用户语句都将在一个事务里面执 ...
- vue脚手架工具vue-cli
一.什么 是脚手架工具vue-cli? 类似于工人手里面的脚手架一样,帮助工人搭架子用,同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具 二.vue-cli能做什么? 三.vue-cli安 ...
- 【JavaScript从入门到精通】第一课
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...