js live方法
来源:互联网 发布:java权限管理设计rbac 编辑:程序博客网 时间:2024/04/29 02:11
从jQuery1.7开始, .live()
方法已经过时了。请使用.on()
附加事件处理程序。 旧版本的jQuery中用户,应优先使用.delegate()
来取代.live()
。
这个方法提供了一种手段,将委托的事件处理程序附加到一个页面的document
元素,从而简化了在页面上动态添加的内容上事件处理的使用。直接与委派事件的讨论,请查看.on()
方法的更多信息。
在其继承者重写.live()
方法是简单的;以下是三种事件添加方法的模板,它们是等价的:
1
2
3
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
events
参数可以是一个空格隔开的事件类型名称的列表和可选的命名空间,或事件名称字符串和处理程序的对象。data
参数是可选的,可以省略。例如,以下三种方法调用方式在功能上是相同的(后文还提供了更有效,性能更好的添加代理事件处理的方式):
1
2
3
$("a.offsite").live("click", function(){ alert("Goodbye!"); }); // jQuery 1.3+
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); }); // jQuery 1.4.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); // jQuery 1.7+
因为更高版本的jQuery提供了更好的方法,没有.live()
方法的缺点,所以.live()
方法不再推荐使用。特别是,使用.live()
出现的以下问题:
- 在调用
.live()
方法之前,jQuery 会先获取与指定的选择器匹配的元素,这一点对于大型文档来说是很花费时间的。 - 不支持链式写法。例如,
$("a").find(".offsite, .external").live( ... );
这样的写法是不合法的,并不能像期待的那样起作用。 - 由于所有的
.live()
事件被添加到document
元素上,所以在事件被处理之前,可能会通过最长最慢的那条路径之后才能被触发。 - 在移动 iOS (iPhone, iPad 和 iPod Touch) 上,对于大多数元素而言,
click
事件不会冒泡到文档 body 上,并且如果不满足如下情况之一,就不能和.live()
方法一起使用:- 使用原生的可被点击的元素,例如,
a
或button
,因为这两个元素可以冒泡到document
。 - 在
document.body
内的元素使用.on()
或.delegate()
进行绑定,因为移动 iOS 只有在 body 内才能进行冒泡。 - 需要 click 冒泡到元素上才能应用的 CSS 样式
cursor:pointer
(或者是父元素包含document.documentElement
)。但是依需注意的是,这样会禁止元素上的复制/粘贴功能,并且当点击元素时,会导致该元素被高亮显示。
- 使用原生的可被点击的元素,例如,
- 在事件处理中调用
event.stopPropagation()
来阻止事件处理被添加到 document 之后的节点中,是效率很低的。因为事件已经被传播到document
上。 .live()
方法与其它事件方法的相互影响是会令人感到惊讶的。例如,$(document).unbind("click")
会移除所有通过.live()
添加的 click 事件!
对于仍在使用.live()
的页面,那么下面关于该方法在不同版中的区别,可能会对您有一定帮助:
- 在 jQuery 1.7 之前,如果想阻止通过
.live()
绑定的事件被冒泡到其它元素上,必须在事件处理中返回false
。调用.stopPropagation()
是不起作用的。 - 从 jQuery 1.4 开始,
.live()
方法支持自定义事件,也支持所有 JavaScript 事件冒泡。它还支持一些原本不能冒泡的事件,包括change
,submit
,focus
和blur
。 - 在 jQuery 1.3.x 中,只能绑定如下 JavaScript 事件:
click
,dblclick
,keydown
,keypress
,keyup
,mousedown
,mousemove
,mouseout
,mouseover
, 和mouseup
.
例子:
Example: 点击段落时,添加另一个段落。注意,.live() 会为所有的段落(包括新生成的段落)绑定事件。
1
$("a").live("click", function() { return false; })
Example: 通过使用 preventDefault 方法仅取消默认的动作。
1
2
3
$("a").live("click", function(event){
event.preventDefault();
});
Example: 使用 .live() 绑定自定义事件。
1
2
3
4
5
6
7
8
9
$("p").live("myCustomEvent", function(e, myName, myValue) {
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
Example: 使用映射绑定多个事件处理。注意,.live() 会为所有的段落(包括新生成的段落)绑定 click, mouseover, 和 mouseout 事件。
1
2
3
4
5
6
7
8
9
10
11
$("p").live({
click: function() {
$(this).after("<p>Another paragraph!</p>");
},
mouseover: function() {
$(this).addClass("over");
},
mouseout: function() {
$(this).removeClass("over");
}
});
0 0
- js live方法
- live方法
- jQuery live方法
- jQuery live() 实现方法
- jquery的live方法
- jQuery 事件 - live() 方法
- jquery live() 替换 方法
- jquery live() 替换 方法
- live()方法用法详解
- jquery live方法替代
- jQuery 事件 - live() 方法
- html delegate、live方法
- JQuery .live()方法
- jquery中live()方法
- js中live的用法
- [TOP]原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- 天翼live兼容2003方法
- JQuery事件绑定live方法
- 至芯FPGA培训中心-1天FPGA设计集训(赠送FPGA开发板)
- smslib 读不了短信的异常
- sql语句在sql server中查询每个表的记录数,占用的空间,索引占用的空间等
- java:浅谈数组与对象的内存控制
- 7-2 多线程练习-——卖票程序(方法二)
- js live方法
- 编程珠玑笔记第一章
- 二叉树的遍历(递归与迭代)
- linux定时执行脚本
- 根据屏幕动态设置view的宽度 DisplayMetrics dip2px
- InStallShield 检测dotnet2.0
- Memcached缓存大数据时对服务器内存、CPU的影响及其对硬件的配置需求
- 程序员每天该做的事
- 完美的DialogBar