下面举个例子

我们希望通过点击使得点击的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 );
});
});

聊一聊JQ中delegate事件委托的好处的更多相关文章

  1. jq中的事件委托:closest,parent,parents,delegate

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

  2. delegate事件委托

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

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

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

  4. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

  5. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  6. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  7. JQuery中的事件委托

    JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...

  8. js中的事件委托或事件代理

    一,概述 JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 举一个网上大牛们讲事件委托都会举的例子:就是取快递来解释,有三个同事预 ...

  9. js中的事件委托或是事件代理

    JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...

随机推荐

  1. hive的安装和升级

    目录 [toc] 安装 升级 安装 nohup hive –service hiveserver & 启动: sudo nohup ./hive --service metastore &am ...

  2. Java基础学习(六)—List

    一.List 1.List集合特有功能 /* * List集合的特有功能: * A:添加功能 * void add(int index,Object element):在指定位置添加元素 * B:获取 ...

  3. chrome插件推荐

    分享自己一直在用的chrome插件 1. Adblock Plus 广告屏蔽插件,能够屏蔽YouTube视频广告.Facebook广告.弹出窗口和其他显眼的广告,个人认为非常强大. 2.AutoPag ...

  4. cooking构建工具报错MSBUILD :error MSB4132解决办法

    最近学习cooking构建工具的时候,在自己的笔记本上运行的好好的,项目在公司电脑上clone下来的时候,发现构建报错,逐条查错,试了好多方法也不行 最后在github上找到了答案,只是之前一直没找到 ...

  5. 浩哥解析MyBatis源码(八)——Type类型模块之TypeAliasRegistry(类型别名注册器)

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6705769.html 1.回顾 前面几篇讲了数据源模块,这和之前的事务模块都是enviro ...

  6. AngularJS学习笔记5

    11.AngularJS  HTML DOM ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <button ng-disabled="my ...

  7. JS中的几种函数

    函数可以说是js中最具特色的地方,在这里我将分享一下有关函数的相关知识: 包装函数:        (function foo(){...})作为函数表达式意味着foo只能在...所代表的位置中被访问 ...

  8. java集合框架(hashSet自定义元素是否相同,重写hashCode和equals方法)

    /*HashSet 基本操作 * --set:元素是无序的,存入和取出顺序不一致,元素不可以重复 * (通过哈希值来判断是否是同一个对象) * ----HashSet:底层数据结构是哈希表, * 保证 ...

  9. 随应潮流-基于ABP+Angulsrjs现代化应用软件开发框架(2)-abp说明

    前言 上周未发布完<基于ABP+Angulsrjs现代化应用软件开发框架(1)-总体介绍> 文章后,好多朋友问了我一些ABP的问题,并且希望我开源我的项目源码,向朋友们说一下,我项目的源码 ...

  10. [ext4]磁盘布局 - group分析

    ext4文件系统的磁盘布局是先把磁盘分成一个个相同大小的block块(每个block块的大小默认是4K),然后把这些block块合成一个个group. group大小最大为256M(默认为256M), ...