jquery事件代理
在jQuery中,事件代理是指:把事件绑定到父级元素,然后等待事件通过DOM冒泡到该元素时再执行。
在事件侦听过程中有两种触发事件的方式:事件捕获和事件冒泡。事件冒泡更快,效率更高。
事件捕获:事件在DOM中向后代元素下沉。
事件冒泡:事件从发生事件的源元素通过DOM向上冒泡。
jQuery使用事件冒泡的方式处理所有的事件。jQuery库提供了3个方法来绑定元素的事件处理函数,分别是bind()、live()、delegate()。
1、使用.bind()绑定事件处理函数:必须提供两个参数,第一个是事件类型,第二个是事件处理函数。
.bind(event type,event handle)
如:
$(document).ready(function(){
$(".selector").bind("click",alertMe);
function alertMe(){
alert("Hello world!");
}
});
.bind()方法仅适用于为DOM中已经存在的元素绑定事件处理函数。对于后来通过操作脚本时添加的DOM元素,则不起作用。
设想:在DOM中有一个.box元素,你希望某个链接在每次被单机时复制这个元素,并把它添加到DOM中。首先,我们可以为这个链接绑定一个适当的click事件处理函数。每单击这个链接一次,.clone()方法就会调用一次,复制box元素并把它追加到相应的容器中:
$(document).ready(function(){
$('.box').bind('click',function(){
$(this).clone().appendTo('.container');
});
}); <div class="container">
<div class="box">click me</div>
</div>
在浏览器运行,结果是单击这个链接,会追加元素。但是单击除了第一个链接的元素时,并不会执行click事件。
因此:绑定的click事件不能作用于这些刚刚被添加到DOM中的新元素。只有绑定事件那一刻DOM中存在的元素才会成功绑定click事件。click事件仅仅被绑定到第一个元素上,因此虽然能不断克隆第一个元素,而被克隆出来的这些元素却没有一个能够受click事件影响。如果想这个克隆出来的元素能够受click事件影响,可以使用.live()绑定。
2、使用.live()绑定事件处理函数
.live()方法提供了一种相当灵活地捕获事件的方式。它的用法与.bind()极为相似。唯一不同点是.live()方法不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素。
.live(event type,event handle)
修改上面的例子:
$(document).ready(function(){
$('.box').live('click',function(){
$(this).clone().appendTo('.container');
});
}); <div class="container">
<div class="box">click me</div>
</div>
3、使用.delegate()绑定事件处理函数
.delegate(selector,event type,event handler)
修改以上例子:
<script type="text/javascript"> $(document).ready(function(){
$('.container').delegate('.box','click',function(){
$(this).clone().appendTo('.container:first');
});
});
</script> <body>
<div class="container">
<div class="box">click me</div>
</div>
<div class="container">
<div class="box">click me</div>
</div>
<div class="container">
<div class="box">click me</div>
</div>
</body>
于用.live()绑定事件处理函数执行效果一样。但是用.delegate()绑定事件处理函数要比用.live()效率更高。jQuery库有关绑定的部分源码:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
}, live: function( types, data, fn ) {
alert(this.context); //添加一行
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
}, delegate: function( selector, types, data, fn ) {
alert(this); //添加一行
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
},
分别在live和delegate方法内增加了一行,浏览器运行后,使用.live(),弹出是document,也就是说用.live()绑定事件,它的源头是document。使用.delegate(),弹出的是object,也就是说用.delegate()绑定事件,它的源头是具体绑定的元素。因此,使用.delegate()要比使用.live()效率更高。
从源码可以看出,用.bind()绑定事件处理函数,可以使用unbind()取消事件绑定。
用.live()绑定事件处理函数,可以使用die()取消事件绑定。
用.delegate()绑定事件处理函数,可以使用undelegate()取消事件绑定。
jquery事件代理的更多相关文章
- jQuery 事件代理时的this
在jQuery使用on方法进行事件代理的时候,this是有多种变化的.下面开始对其进行研究 HTML的代码: <ul id="selected-plays" class=&q ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- 事件代理总结: 已经有一些使用主流类库的事件代理示例出现了,比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子,比如说Usable Type blog上的这一个。一旦需要的话,事件代理将是你工具箱里的一件得心应手的工具,而且它很容易实现。
如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- Atitit事件代理机制原理 基于css class的事件代理
Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...
- 解密jQuery事件核心 - 模拟事件(四)
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- js事件代理(委托)
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
随机推荐
- generated clock
内部时钟的定义: create_generated_clock,通过-source,-edges,-divide_by,-multiply_by来执行clock沿. create_generated_ ...
- 白话LINQ系列1---什么是LINQ?
一.本系列目标 1.理解LINQ: 2.能写得复杂的LINQ语句(比如:动态查询): 3.理解表达式树及相关概念: 4.熟练运用LINQ写出优美的代码(希望一起努力,最终达到): 二.LINQ为何物? ...
- delphi的webBrowser操作HTML研究
测试例子: 外网电脑D:\TEST\delphiTest\webbrowsetest 参考文档: delphi 操作WebBrowser 元素值 http://hi.baidu.com/kinglik ...
- 【转】PowerShell入门(四):如何高效地使用交互式运行环境?
转至:http://www.cnblogs.com/ceachy/archive/2013/02/05/PowerShell_Interacting_Environment.html 在开始关于脚本. ...
- angularjs与require的集成摘抄
基于requireJS和angularJS的前端技术架构 :http://blog.163.com/liuyong_xiaxia/blog/static/17435525520156341446981 ...
- redmine设置
接上篇. 1.redmine新版本已经比较强大了,可以定制所有字段(含标准字段和自定义字段)的读写属性.这里为了避免字段过多影响用户感受,希望增加功能将不相关的字段屏蔽,下载插件Workflow Hi ...
- 管理Cookie的插件——jquery.cookie.js
下载地址:http://plugins.jquery.com/cookie/ jquery.cookie中的操作: 一.创建cookie: 1.创建一个会话cookie: $.cookie('cook ...
- :before\:after伪元素用法
:before和:after这两个伪元素在真正的页面元素之前和之后插入一个额外的的元素,等效于下面的代码: <p> <span>:before</span> HTM ...
- Iptables防火墙
1 位置 使用vim /usr/sysconfig/iptables 2 启动.关闭.保存 service iptables stop service iptables start service i ...
- AC自动机——Uva 11468 子串
题目链接:http://vjudge.net/contest/142513#problem/A 题意:给出一些字符和各自对应的选择概率,随机选择L次后将得到一个长度为L的随机字符串S.给出K个模版串, ...