JQuery的click、bind、delegate、off、unbind
.click与.bind
.click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式。
这两种方式都会出现两个问题:
第一个问题,如果要绑定的事件特别多,比如要绑定100个元素,要绑定100次,对于大量元素来说,影响到了性能。但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
第二个问题,对于尚未存在的元素,无法绑定。动态添加一个span元素,点击这个span元素,会发现没有动作响应。
那么你就会问,为什么要出现.bind()这个事件呢?
.bind()可以一次添加多个事件。

你给一个元素一次性添加了好多事件,.unbind()事件解绑,可以有选择性的解绑。
比如说,一个按钮,你点击后他要提交到后台等返回结果是,你不希望它能够再次被点击,但是它的其他效果还有,你就需要解绑。

还可以给绑定的事件起名字.bind("mouseover.plugin" function(){})
解绑的时候 unbind(".plugin");
unbind("mouseover!")加!的是匹配所有不含命名空间的mouseover事件
.click和.bind 与.delegate

这个效果和普通绑定事件和on委托事件效果一样.
这种方式采用了事件委托的概念。不是直接为btn3元素绑定事件,而是为其父元素(或祖先元素也可)绑定事件,当在父元素内任意元素上点击时,事件会一层层从event target向上冒泡,直至到达你为其绑定事件的元素。冒泡的过程中,如果事件的currentTarget与选择器匹配时,就会执行代码。
这样就解决了用。click(),bind()方法的上面两个问题,不用再一个个地去为btn元素绑定事件,也可以为动态添加进来的btn元素绑定。甚至,如果你将事件绑定到document上,都不用等document准备好就可执行绑定。
这样,绑定是容易了,但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置,这样一层层冒泡上来查找与选择器匹配的元素,又影响到性能了。
.bind 与.delegate都可以同时绑定多个事件。
.delegat与.on
这两个函数实现的效果是一样的,以前没有开放on,只有bind,click,live,delagate,他们都是通过on实现的,后面把live删了,把on直接开放出来用。但是为什么不把.delegate也删掉,就不知道了,知道的可以告诉我。
.delegate和.on还是有一些细微的区别的:

参数的位置不太一样。
对于他们的解绑/解除委托

click和bind用unbind解绑,delegate和on的都是相应的解除委托,假如你要直接解绑一个元素的一个事件,那么你就用id选择器好了~,对一个单独元素这样解除委托不可以哦!

这样用类解除委托

总结:
①选择器匹配到较多元素时,不用click和bind,用delegate和on,增加效率并且可动态添加元素。注意dom树不要太深,父元素选择得当。Jq版本要高
②选择器匹配的元素少时,可以用click和bind。 Jq低版本支持
综上所述呢,目前用on就对了。
JQuery的click、bind、delegate、off、unbind的更多相关文章
- jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate
.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...
- jQuery方法区别:click() bind() live() delegate()区别
今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() { alert("h ...
- Jquery中的bind()方法的一点问题
bind()方法绑定事件的时候,第二个参数是函数,如果代码都写在函数里面,没有任何问题.但是,直接调用外部封装的函数需要注意,出错的例子: <!doctype html> <html ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- Jquery中click事件重复执行的问题
平常没注意事件绑定问题,在此注意一下: function testClick(obj){ $("select").off().on("click", funct ...
- jQuery方法区别(四)click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...
随机推荐
- Android之MessageQueue、Looper、Handler与消息循环
在android的activity中有各种各样的事件,而这些事件最终是转换为消息来处理的.android中的消息系统涉及到: * 消息发送 * 消息队列 * 消息循环 * 消息分发 * 消息 ...
- C# 图片识别技术(支持21种语言,提取图片中的文字)
图片识别的技术到几天已经很成熟了,只是相关的资料很少,为了方便在此汇总一下(C#实现),方便需要的朋友查阅,也给自己做个记号. 图片识别的用途:很多人用它去破解网站的验证码,用于达到自动刷票或者是批量 ...
- 单台centos7.3 虚拟机实现主从复制和哨兵集群
环境: centos7.3一台 部署图: 从服务器配置: slaveof 哨兵配置: port sentinel monitor m1 127.0.0.1 6379 2 sentinel monito ...
- 实现返回top功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- QA规范
规范流程: 1)拿到需求,分析需求,先写一版checklist: 2)进行codediff,过程中最好一行行代码review,尽早发现代码错误或代码逻辑不完善的地方,codediff之后修改check ...
- poj3666 Making the grade【线性dp】
Making the Grade Time Limit: 1000MS Memory Limit: 65536K Total Submissions:10187 Accepted: 4724 ...
- Educational Codeforces Round 25 E. Minimal Labels&&hdu1258
这两道题都需要用到拓扑排序,所以先介绍一下什么叫做拓扑排序. 这里说一下我是怎么理解的,拓扑排序实在DAG中进行的,根据图中的有向边的方向决定大小关系,具体可以下面的题目中理解其含义 Educatio ...
- mysql 标点符号
w攻防一体化.
- 解决hung_task_timeout_secs问题【方法待校验】
问题描述: kernel: "echo 0 > /proc/sys/kernel/hung_task_timeout_secs" disables this messag ...
- 【opencv入门篇】快速在VS上配置opencv
环境配置:win7-32 + opencv2.4.6 + vs2013 注意:无论电脑是32位还是64位,配置opencv库目录时选择x84文件夹!因为编译都是使用32位编译:如果选用X64,则程序运 ...