- 浏览: 291362 次
- 性别:
- 来自: 黑龙江
文章分类
- 全部博客 (151)
- 工具配置 (11)
- 前端技巧 (29)
- 分享 (4)
- action (1)
- ORM (2)
- mysql (17)
- html5 (1)
- java EE (1)
- 数据库理论 (5)
- 密码安全 (2)
- maven (7)
- java (14)
- linux (10)
- 电脑知识 (2)
- spring mvc (1)
- apache (2)
- php (2)
- 分布式 (1)
- memcache (2)
- ActiveMQ (1)
- jetty (2)
- foxmail拒信 (1)
- dos (1)
- eclipse (4)
- mybatis (2)
- tomcat (1)
- shell (0)
- Jmeter (3)
- windows (1)
- redis (6)
- StringUtils (1)
- svn (1)
- jsoup (2)
- zookeeper (3)
- log4j (3)
- git (3)
- solr (1)
- elasticsearch (1)
- 佛祖 (1)
- spring boot (2)
- openldap (0)
最新评论
-
boreas_baosj:
绑定多个事件的时候怎么传递参数呢???
jquery中的bind事件,详解,传参 -
sauzny:
usiboy 写道NIO确实可以提高Socket通讯上的效率, ...
Tomcat并发数优化的方法总结 -
usiboy:
NIO确实可以提高Socket通讯上的效率,但对于JVM的调优 ...
Tomcat并发数优化的方法总结
Jquery中绑定事件有三种方法:以click事件为例
(1)target.click(function(){});
(2)target.bind("click",function(){});
(3)target.live("click",function(){});
第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已
第二、三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这
个如果用到Jquery的框架的话是用的挺多的,尤其要注意二者的区别。
【bind和live的区别】
live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一
个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS
等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后
生成的元素也可以绑定相应的事件。那么live方法的这个特性是怎么实现的呢?下面来
探讨一下其实现原理。
live方法之所以能对后生成的元素也绑定相应的事件的原因归结在“事件委托”上面,所
谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。live方
法的处理机制就是把事件绑定在DOM树的根节点上,而不是直接绑定在某个元素上。
举一个例子来说明:
$(".clickMe").live("click",fn);
$("body").append("<div class='clickMe'>测试live方法的步骤</div>");
当我们点击这个新增的元素时会依次发生如下步骤:
(1)生成一个click事件,传递给div来做处理
(2)由于没有事件直接绑定在div上,所以事件直接冒泡到DOM树上
(3)事件不断冒泡,直到DOM树的根节点上,默认情况下,根节点上就绑定了这个
click事件
(4)执行由live绑定的click事件
(5)检测绑定事件的对象是否存在,判断是否需要继续执行绑定的事件。检测事件
对象是通过检测 $(event.target).closest('.clickMe') 能否找到匹配的元素来实
现的
(6)通过(5)的测试,如果绑定事件的对象存在的话,就执行绑定的事件。
由于只有在事件发生的时候,live方法才会去检测绑定事件的对象是否存在,所以live方
法可以实现后来新增的元素也可实现事件的绑定。相比之下,bind会在事件在绑定阶段
就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节
点上。根据上面的分析,live的好处真是很大,那么为什么还要使用bind方法呢?之所
以jquery要保留bind方法而不是采用live方法去替代bind,也是因为live在某些情况下是
不能够完全替代bind的。主要的不同如下:
(1)bind方法可以绑定任何JavaScript的事件,而live方法在jQuery1.3的时候只支
持click, dblclick, keydown, keypress, keyup,mousedown, mousemove,
mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中,甚至也支持 focus
和 blur事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另
外,在jQuery 1.4.1中,也能支持hover
(映射到"mouseenter mouseleave")。
(2)live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总
是在一个选择器后 面直接使用 .live() 方法。
(3)当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒
泡,就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事
件的传递或者冒泡的
【补充于2012-08-13】
如果你研究过了一些主流的框架的话,会理解的更深入一些,live的实现原理--事件委托
机制的实质就是通过冒泡和捕获。
(1)支持事件冒泡的事件有:鼠标时间和键盘事件
(2)接口事件通常不支持事件冒泡,如:load,unload,focus,blur,change,
submit等
对于支持事件冒泡的事件只要开启其事件冒泡机制便可,但对于不支持事件冒泡的事件
,如接口事件等则需要利用下面的方法来实现:
(1)针对标准浏览器: 开启事件捕获
eg: ele.addEventListener(e,func,true);
(2)针对IE浏览器:使用替换事件
focus 可采用 focusin来代替,此事件可进行冒泡
blur 可采用 focusout来代替,此事件可进行冒泡
(1)target.click(function(){});
(2)target.bind("click",function(){});
(3)target.live("click",function(){});
第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已
第二、三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这
个如果用到Jquery的框架的话是用的挺多的,尤其要注意二者的区别。
【bind和live的区别】
live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一
个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS
等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后
生成的元素也可以绑定相应的事件。那么live方法的这个特性是怎么实现的呢?下面来
探讨一下其实现原理。
live方法之所以能对后生成的元素也绑定相应的事件的原因归结在“事件委托”上面,所
谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。live方
法的处理机制就是把事件绑定在DOM树的根节点上,而不是直接绑定在某个元素上。
举一个例子来说明:
$(".clickMe").live("click",fn);
$("body").append("<div class='clickMe'>测试live方法的步骤</div>");
当我们点击这个新增的元素时会依次发生如下步骤:
(1)生成一个click事件,传递给div来做处理
(2)由于没有事件直接绑定在div上,所以事件直接冒泡到DOM树上
(3)事件不断冒泡,直到DOM树的根节点上,默认情况下,根节点上就绑定了这个
click事件
(4)执行由live绑定的click事件
(5)检测绑定事件的对象是否存在,判断是否需要继续执行绑定的事件。检测事件
对象是通过检测 $(event.target).closest('.clickMe') 能否找到匹配的元素来实
现的
(6)通过(5)的测试,如果绑定事件的对象存在的话,就执行绑定的事件。
由于只有在事件发生的时候,live方法才会去检测绑定事件的对象是否存在,所以live方
法可以实现后来新增的元素也可实现事件的绑定。相比之下,bind会在事件在绑定阶段
就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节
点上。根据上面的分析,live的好处真是很大,那么为什么还要使用bind方法呢?之所
以jquery要保留bind方法而不是采用live方法去替代bind,也是因为live在某些情况下是
不能够完全替代bind的。主要的不同如下:
(1)bind方法可以绑定任何JavaScript的事件,而live方法在jQuery1.3的时候只支
持click, dblclick, keydown, keypress, keyup,mousedown, mousemove,
mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中,甚至也支持 focus
和 blur事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另
外,在jQuery 1.4.1中,也能支持hover
(映射到"mouseenter mouseleave")。
(2)live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总
是在一个选择器后 面直接使用 .live() 方法。
(3)当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒
泡,就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事
件的传递或者冒泡的
【补充于2012-08-13】
如果你研究过了一些主流的框架的话,会理解的更深入一些,live的实现原理--事件委托
机制的实质就是通过冒泡和捕获。
(1)支持事件冒泡的事件有:鼠标时间和键盘事件
(2)接口事件通常不支持事件冒泡,如:load,unload,focus,blur,change,
submit等
对于支持事件冒泡的事件只要开启其事件冒泡机制便可,但对于不支持事件冒泡的事件
,如接口事件等则需要利用下面的方法来实现:
(1)针对标准浏览器: 开启事件捕获
eg: ele.addEventListener(e,func,true);
(2)针对IE浏览器:使用替换事件
focus 可采用 focusin来代替,此事件可进行冒泡
blur 可采用 focusout来代替,此事件可进行冒泡
发表评论
-
js中setInterval与setTimeout用法
2014-01-17 10:01 826setTimeout 定义和用法: setTime ... -
uploadify上传文件
2013-07-16 11:15 2346发现网上很多人写的都好像是旧的方法,好像已经过时了… ... -
js 正则验证
2013-01-16 14:25 944/判断输入内容是否为空 function IsNull() ... -
js对字符串的处理,以及验证
2013-01-16 14:06 1165JS自带函数concat将两个或多个字符的文本组合起来,返回一 ... -
(MD)正则表达式中的特殊字符
2012-11-01 14:52 1824字符 含意 \ 做为 ... -
jquery ajax的参数详解
2012-10-31 13:00 1095参数名 类型 描述 ... -
JQUERY的父,子,兄弟节点查找方法
2012-10-31 11:00 44940jQuery.parent(expr) 找父亲节点,可以传入 ... -
jquery的md5插件
2012-10-20 18:24 1148(function($){ var rotate ... -
list-style功能:设置列表项目相关内容。
2012-10-16 15:32 987list-style功能:设置列表项目相关内容。 语法 ... -
JS父页面获取子页面返回值
2012-10-11 16:47 2855父页面<html><head> ... -
对textarea的内容进行详细监听(键盘+鼠标)
2012-09-27 17:56 1203$("#textarea").bin ... -
base64:URL背景图片与web页面性能优化
2012-09-26 18:07 2150一、base64百科 Base64是网络上最常见的用于传输8 ... -
word-wrap同break-word的区别
2012-09-23 15:09 995自动换行word-break:break-all和word-w ... -
Jquery弹出层BlockUI的用法(BlockUI是个插件)
2012-09-18 11:02 2344例子一: <head runat="serv ... -
jQuery中ajax中事件执行顺序
2012-09-18 10:51 9391.ajaxStart(全局事件) 2.beforeSend ... -
CSS2.0无图片实现圆角
2012-09-13 18:49 910CSS2.0无图片实现圆角 -
jquery中的ready和window的onload之间的“藕断丝连”
2012-09-10 03:00 850遇到了一个死循环,经高人指点,置之死地而后生~ -
textarea中的MaxLength属性在ie中失效问题
2012-09-09 17:18 1376代码解决 -
jquery弹出窗口锁屏代码
2012-09-09 17:17 1057还在改进中 -
json不能解读回车等字符引发的java与js编码和解码的问题
2012-09-09 17:16 1025编码问题 乱七八糟
相关推荐
今天我们将深入探讨jQuery中的事件绑定方法,包括`bind()`, `live()`, `delegate()`,以及后来推出的`on()`方法。这四个方法都是为了帮助开发者更方便地管理页面上的事件,特别是对于动态生成的元素。 1. **bind()*...
在探讨jQuery中的`bind()`, `delegate()`, 和`live()`事件绑定方法的区别时,我们需要深入理解它们在处理DOM事件时的独特方式。这些方法在不同的场景下提供了灵活且高效的选择,帮助开发者创建响应式和动态的Web应用...
在早期版本的 jQuery 中,`live()` 方法和 `bind()` 方法是两种主要的事件绑定方式,它们在功能和使用上有各自的特点和限制。 `live()` 方法主要用于为当前及未来添加到 DOM 中的元素绑定事件处理器。例如,如果有...
jQuery是目前广泛使用的一个...了解`bind`和`live`的区别和用法,有助于在不同的开发场景中选择合适的事件处理方式,提高代码的效率和性能。在实际应用中,正确地使用这些方法,将有助于提升用户界面的交互体验。
在jQuery库中,有四种主要的方法用于绑定事件处理程序:`.bind()`, `.live()`, `.delegate()`, 和 `.one()`。这些方法各有特点,适用于不同的场景,下面我们将逐一深入探讨它们的用法和区别。 1. **.bind() 方法** ...
这篇文章将重点探讨bind和live的区别。 首先,click方法是最基础的事件绑定方式,它与JavaScript中的事件处理方式相似,只是省去了"on"前缀。例如,`target.click(function(){})` 会为目标元素添加点击事件处理程序...
在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...
在jQuery中,`bind` 和 `on` 都是用来绑定事件处理函数的,但它们之间存在一些关键的区别。本文将详细解析这两个方法的用法及其差异。 首先,`bind` 是 jQuery 的早期版本中用于绑定事件的方法。它接受三个参数:`...
本文将深入探讨jQuery中的事件代理方式,包括`live`, `delegate`和`bind`的区别与联系。 ### 事件冒泡与事件代理原理 事件冒泡是指事件从最深的节点开始,逐级向上层节点传播事件的过程。当一个元素触发事件,该...
在jQuery库中,`live()` 和 `bind()` 都是用来为元素绑定事件处理函数的方法,但它们之间存在着显著的差异,这些差异对于理解和优化JavaScript代码至关重要。本文将深入探讨这两个方法的区别及其应用场景。 首先,`...
此外,`bind()`、`live()`和`delegate()`在某些早期版本的jQuery中不支持动态创建元素的事件绑定,而`on()`方法解决了这个问题。 了解了这些方法的使用和区别,可以帮助开发者在处理不同情况下的事件绑定时做出更...
在不同的版本中,jQuery 提供了多种方法来绑定事件,主要包括 bind()、on()、live() 和 one()。接下来,我们将详细探讨这些方法的相似点和不同点。 首先,让我们了解一下 bind() 方法。bind() 是 jQuery 中最传统的...
在讨论jQuery中的事件绑定方法时,.bind()、.live()和.delegate()是三种重要的技术。为了深入理解这些方法之间的区别和特点,首先需要对DOM事件的传播机制有所了解。在DOM事件模型中,事件传播分为捕获和冒泡两个...
本文主要探讨了四个常用的事件绑定方法:bind(), live(), delegate(), 和 on(),并提供了实例来帮助理解它们的区别和用途。 1. **bind()**: - `bind()` 是最基础的事件绑定方法,用于向匹配的元素添加一个或多个...
`on`方法更为通用,可以用来替代`bind`、`live`和`delegate`方法。`on`方法的使用如下: ```javascript $(selector).on(eventType, selector, data, handler); ``` - `selector`:可选,用于选择内部的子元素进行...
在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...在实际项目中,根据jQuery的版本和需求选择合适的方法和插件,能有效提升开发效率和代码质量。