在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事件代理的更多相关文章

  1. jQuery 事件代理时的this

    在jQuery使用on方法进行事件代理的时候,this是有多种变化的.下面开始对其进行研究 HTML的代码: <ul id="selected-plays" class=&q ...

  2. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  4. 事件代理总结： 已经有一些使用主流类库的事件代理示例出现了，比如说jQuery、Prototype以及Yahoo! UI。你也可以找到那些不用任何类库的例子，比如说Usable Type blog上的这一个。一旦需要的话，事件代理将是你工具箱里的一件得心应手的工具，而且它很容易实现。

    如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...

  5. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  6. Atitit事件代理机制原理 基于css class的事件代理

    Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...

  7. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  8. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  9. js事件代理（委托）

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...

随机推荐

  1. linux服务器性能优化

    1.这里的吞吐率特指Web服务器单位时间内处理的请求.       2.压力测试的前提:1>并发用户数 2>总请求数 3>请求资源描述       3.用户平均请求等待时间主要用户衡 ...

  2. .naturalWidth 和naturalHeight属性，

    在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为 .naturalWidth 和naturalHeight属性,例子如下: var rw = myimage.naturalWidt ...

  3. myisam压缩（前缀压缩）索引

    myisam使用前缀压缩来减少索引的大小,从而让更多的索引可以放入内存中,默认只压缩字符串,但通过参数配置也可以对整数做压缩,myisam压缩每个索引块的方法是,先完全保存索引块中的第一个值,然后将其 ...

  4. noi 4978 宠物小精灵之收服

    题目链接:http://noi.openjudge.cn/ch0206/4978/ 二维费用背包 在最后找还剩多少体力的时候,直接找到第二维,当结果 f[n][i] == f[n][m] 时,就说明已 ...

  5. Bootstrap_警示框

    一.默认警示框 Bootstrap框架通过“alert“样式来实现警示框效果.在默认情况之下,提供了四种不同的警示框效果: 1.成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“aler ...

  6. WordPress搬家教程：换空间与换域名

    WordPress搬家教程:换空间与换域名 由于本人博客空间8月份已到期,便新购一个虚拟主机想进行WordPress搬家,于是特意在网上查了些WordPress搬家教程,进行了综合总结,并结合这次实操 ...

  7. 从C语言快速学PHP

    PHP是解释性语言,是Web开发中常用的语言.对于web编程,建议学习时参考w3cschool的在线api手册. PHP和C语言及其相似,懂C的人只要稍加学习就能写出简单的PHP程序.以下是PHP与C ...

  8. js获取url参数 兼容某些带#url

    网上有大把现成的代码,不过有点小小的瑕疵 例如目前最流行的 正则法: function getArgument(_arg) { var reg = new RegExp("(^|&) ...

  9. cocos2dx 动画显示异常

    最近遇到一个问题 好多cocostudio导出的动画 显示都会有异常 很明显的融合方式 把混合方式里面的 src 改成one dst 改成 one-src alpha 解决 后面附上同行的文章 浅显易 ...

  10. C++中虚析构函数的作用

    我们知道,用C++开发的时候,用来做基类的类的析构函数一般都是虚函数.可是,为什么要这样做呢?下面用一个小例子来说明:         有下面的两个类: class ClxBase { public: ...