下面举个例子

我们希望通过点击使得点击的li标签变红

<body style="height:2000px;">

<ul>

    <li>1111</li>

    <li>1111</li>

    <li>1111</li>

    <li>1111</li>

</ul>

</body>

普通写法

$(function(){

    $('li').on('click',function(){

        $(this).css('background','red');

    });

});

事件委托写法

$(function(){

    $('ul').delegate('li','click',function(ev){

        $(this).css('background','red');

    });

});

我们发现以上两种方法都可以使所点击的li标签变红，效果上没有区别， 
但是普通写法on是将事件加到li标签上面， 
而事件委托delegate写法事件并没有加到li上面，而是加到了ul的上面，是$(this)触发的时候指向了li；利用了冒泡原理。

事件委托的好处： 
1、原本需要给多个元素添加，现在只需要给一个元素添加，性能上比较好些。 
2、对后续创建生成的元素可以直接操作，而on事件不可用。

例如： 
当点击按钮的时候，想ul里面创建一个li标签

<body style="height:2000px;">

<input id="input1" type="button" value="添加">

<ul>

    <li>1111</li>

    <li>1111</li>

    <li>1111</li>

    <li>1111</li>

</ul>

</body>
$(function(){

    $('li').on('click',function(){

        $(this).css('background','red');

    });//对于新创建添加的li标签点击无变化

    $('ul').delegate('li','click',function(ev){

        $(this).css('background','red');

        //$(ev.delegateTarget).css('background','red');    //委托对象ul

        $(ev.delegateTarget).undelegate();//取消委托

    });//新创建添加的li标签也可以变红

    //原因在于事件原本就不在li上面，新创建的和原本有的没有区别，真正的事件是在ul身上，只要ul不变，ul里面元素的事件都是可以触发的

    $('#input1').click(function(){

        var $li = $('<li>hello</li>');//创建li标签

        $('ul').append( $li );

    });

});

delegate事件委托的更多相关文章

  1. 聊一聊JQ中delegate事件委托的好处

    下面举个例子 我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111&l ...

  2. jq中的事件委托：closest，parent，parents，delegate

    closest .closest(selector) 从当前元素开始沿 DOM 树向上,获得匹配第一个符合选择器的祖先元素,返回零个或一个元素的 jQuery 对象. .parents() 和 .cl ...

  3. 【Unity3D技巧】在Unity中使用事件/委托机制（event/delegate）进行GameObject之间的通信 (二) : 引入中间层NotificationCenter

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...

  4. c#中的delegate（委托）和event（事件）

    c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...

  5. 转载： jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

    转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...

  6. 事件委托live,delegate,on区别

    事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一 ...

  7. 事件/委托机制（event/delegate）（Unity3D开发之十七）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/46539433 ...

  8. jQuery事件委托方法 bind live delegate on

    1.bind    jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法:  bind(type,[data],function(e)); 特点: a.适合页 ...

  9. 关于事件委托的整理 ，另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

随机推荐

  1. 震撼：多线程下的操作离不开synchronized

    昨天在写一个聊天程序,在发送消息的时候是采用单独的一个线程,接收消息是在另一个线程中完成. 我在测试的过程中发现,有的时候当消息比较多时,比如: 当我刚刚发送完一条消息,这个时候要将我发送的消息添加到 ...

  2. MySQL排序函数field()详解

    在日常开发过程中,排序是经常用到的,有时候有这样的需求. 比如,需要在查询结果中根据某个字段的具体值来排序.如下面例子 上面是一张个人信息 表,假如我们想按照'seiki','iris','xut'来 ...

  3. JS实现clone()方法，对五种主要数据类型进行值复制

    Object.Array.Boolean.Number.String 分为三种情况:普通变量,Array,Object 递归调用

  4. Windows Server 2003 添加“Resin”到“服务”出错

    将“Resin”添加到[服务] 进入安装目录,执行 httpd -install 从[服务]移除 执行 httpd -remove ---------------------------------- ...

  5. SPEL表达式

    https://www.cnblogs.com/best/p/5748105.html

  6. Java中String和byte[]间的转换浅析

    Java语言中字符串类型和字节数组类型相互之间的转换经常发生,网上的分析及代码也比较多,本文将分析总结常规的byte[]和String间的转换以及十六进制String和byte[]间相互转换的原理及实 ...

  7. jmeter计算身份证校验位

    idcard_no='111111198101017000' ; idcard_no_array = idcard_no.substring(0,17).toCharArray(); int[] c ...

  8. Neo4j社区版配置文件

    #*****************************************************************# Neo4j configuration## For more d ...

  9. 7.桥接模式（Bridge Pattern）

    动机(Motivate):    在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化, ...

  10. UDP协议

    本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明出处http://blog.csdn.net/yming0221/article/details/7532512 更多请看专栏, ...