live(),bind(),delegate()等事件绑定方法的区别及应用解析
1 首先bind()方法是最直观的,但是也是弊端最大的。
$('a').bind('click',function(){alert('that tickles!')})
这和事件冒泡有直接关系,当我们点击了<a></a>标签时,会立马执行alert,但与此同时,click()事件会接着向DOM树的根方向传播,广播到父元素,由父元素向上到每个祖先元素,只要是它的某个后代元素上的click()事件被触发,那么整个dom树都会牵一发而动全身。所以对未来元素的绑定不能用bind.
2 live()方法的应用显然比bind()好了很多,用于为指定元素的一个或多个事件绑定事件处理函数。
jQueryObject.live( events [, data ], handler )
jQueryObject.live( eventsMap )
实例:
$('a').live('click',function(){alert('That tickles!')})
2.1 其中events为string类型,一个或多个用空格分隔的事件类型的可选的命名空间;data为可选的,任意类型,作用是传递给事件处理函数的任意数据;hander指定的事件处理函数;eventMap为一个object对象,每个属性对应事件类型和可选的命名空间(event),属性值对应绑定的事件处理函数。
2.2 live()的事件处理函数全部附加到document对象上,所以事件的处理时间可能会长一些,冒泡执行使会检查对象是不是对应的事件(本例中会检查是不是click事件),更重要的是会检查该事件的目标元素是否与“a”这一css选择器匹配(当前jQuery对象必须通过选择器字符串构造,否则无法处理触发事件)。
2.3 live()方法还可以被绑定到具体的元素上(not document)
eg:
$('a',$('#container')[]).live('click',function(){alert('That tickles!')})//很useful的特点~
live()方法还有一个特点就是即使是后面创建的元素,用它绑定的事件会一直有效。
$("#jnBrangList").find(".imageMask").live("hover",function(){
$(this).toggleClass("imageOver");
});
如上例,因为“imageOver”元素是被页面加载完后动态创建的,所以如果用bind()的话是不会有效果的。
2.4撤销live(),可以匹配使用die()
3 delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。该方法适用于当前或未来的元素(比如由脚本创建的新元素)。
语法为:
$(selector).delegate(childSelector,event,data,function)
这样我们可以把上面live()的实例改成:
$("#jnBrandList").delegate(".imageMask","hover",function(){
$(this).toggleClass("imageOver");
});
live(),bind(),delegate()等事件绑定方法的区别及应用解析的更多相关文章
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- 完美的jquery事件绑定方法on()
在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法: .live() jQuery 1.3新增的live()方法,使用方法例如以下: $("#info_table td& ...
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
- JS三个事件绑定方法
1. JS三个事件绑定方法 1.1. 使用html进行事件绑定 1.直接在html标签上写入事件类型和事件处理方法. <button onclick = "alert('hello w ...
- jQuery事件绑定方法bind、 live、delegate和on的区别
我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...
- jQuery的4种事件绑定方法
jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...
- Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)
JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...
- js事件绑定方法
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
随机推荐
- [C语言 - 4] 指针
存放变量地址的变量 int a = 1; int *p; p = &a; 在64位系统中,占用8个字节 直接引用 间接引用 *p : 指针指向的变量的值 不要使用未初始化的指针 1 ...
- 判断滑动方向UITableView
CGFloat lastContentOffset; //ScoreView 滑动位置 -(void)scrollViewWillBeginDragging:(UIScrollView*)scrol ...
- Java常用类(String、StringBuffer、Math、Arrays)
1.String 操作对象时会重新分配堆内存,栈内存的引用会重新指向新的堆内存 2.StringBuffer(字符串缓存区) 操作的对象一直都是一个 3.Math Math.max(xx,xx); M ...
- win8图片默认不显示
最近,发现了一个问题,在查看图片的时候,出现了这样的情况: 查看的时候很不方便,想要找到自己需要的图片就要误打误撞,也不知道自己在哪儿设置了,于是,上网查资料,才发现其实只需要简单的该一下设置就可以了 ...
- VC中监测函数运行时间
VC++编程时,经常会监控某个算法的计算时间,以确定算法的效率.编码举例如下, //========start: algorithm time============= // SYSTEMTIME s ...
- 33条C#、.Net经典面试题目及答案[zt]
33条C#..Net经典面试题目及答案[zt] 本文集中了多条常见的C#..Net经典面试题目例如“.NET中类和结构的区别”.“ASP.NET页面之间传递值的几种方式?”,并简明扼要的给出了答案,希 ...
- Centos7安装Docker Engine
一.先决条件 首选需要一个64位操作系统和3.10或者更版本的内核. 查看当前内核版本: $ uname -r -.el7.x86_64 二.yum安装Docker Engine 安装Docker E ...
- 从零开始学android开发-布局中 layout_gravity、gravity、orientation、layout_weight
线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...
- Apache Httpd通过mod_jk连接多个Tomcat
一个tomcat能够配置多个web apps,这是众所周知的.当更改了一个web app,想要又一次启动的时候.因为全部的web apps都是放在同一个tomcat下的,所以别的web apps也在重 ...
- iOS开发——UI篇&ScrollView详解
创建方式 1:StoryBoard/Xib 这里StoarBoard就不多说,直接拖就可以,说太多没意思,如果连这个都不会我只能先给你跪了! 2:代码: CGRect bounds = [ [ UIS ...