下面举个例子

我们希望通过点击使得点击的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. Netd学习笔记

    service netd /system/bin/netd     class main     socket netd stream 0660 root system     socket dnsp ...

  2. 使用FSharp 探索Dotnet图像处理功能2--均衡灰度

    重新捡起大学里的图像处理,好像之前什么都没学到,但是我为什么还留着这本书呢?嘿嘿. 看到均衡灰度处理,上来就是积分,概率分布的公式,头微微的有点疼.网上看了点介绍,隔天再拿起书本,总算有了点眉目.简而 ...

  3. TableView cell自适应高度-----xib

    1.通过xib创建一个cell,将label进行上左下右,进行适配, self.automaticallyAdjustsScrollViewInsets = NO; self.edgesForExte ...

  4. GPU加速有坑？

    大多数人都知道有动画的地方可以使用GPU来加速页面渲染. 例如,做优化的时候,将使用left和top属性的动画修改成使用transform属性的CSS动画.或者听到别人教你使用transform:tr ...

  5. alert 和 console.log的区别

    出走半月,一直以为 console.log 和 alert 的用法是一样的,只是表现的形式不同,alert 是以弹框的形式出现,console.log 是在后台打印输出. 但是今天在写东西的时候,发现 ...

  6. 常用 SQL 语句使用的总结

    --SQL 语句为表添加字段并设置默认值 alter table Student --表名 add fee --添加的字段名 int --字段类型 not null --是否为空 --默认值 --修改 ...

  7. Angular.js学习笔记 （一）

    - angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Mo ...

  8. [Python]再学 socket 之非阻塞 Server

    再学 socket 之非阻塞 Server 本文是基于 python2.7 实现,运行于 Mac 系统下 本篇文章是上一篇初探 socket 的续集, 上一篇文章介绍了:如何建立起一个基本的 sock ...

  9. struts1实现简单的登录功能（附源码）

    环境:MyEclipse 14                                                                                     ...

  10. 初学strurs基础

    Struts2基础学习总结 Struts 2是在WebWork2基础发展而来的. 注意:struts 2和struts 1在代码风格上几乎不一样. Struts 2 相比Struts 1的优点: 1. ...