下面举个例子

我们希望通过点击使得点击的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. Python可视化学习（2）：Matplotlib快速绘图基础

    Matplotlib将大部分的绘图对象都封装成为对象,故理论上所有的图表元素(如Line2D, Text,Label等)都是对象,都可以将其在图表中提取出来并配置实例的属性.同时,Matplotlib ...

  2. Shiro基础学习(一)—权限管理

    一.基本概念 1.权限管理      只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资源.     权限管理 ...

  3. __init__.py

    python中的Module是比较重要的概念.常见的情况是,事先写好一个.py文 件,在另一个文件中需要import时,将事先写好的.py文件拷贝 到当前目录,或者是在sys.path中增加事先写好的 ...

  4. php基础知识（二）---2017-04-14

    1.字符串的三种表达形式: (1)双引号 (2)单引号 (3)尖括号 $s = <<<A <div style="width:500px; height:100px; ...

  5. 【树莓派】修改树莓派盒子MAC地址

    用树莓派盒子,在某些客户方实施过程中,不同客户的网络环境对树莓派盒子的要求不同,网络管理配置要求MAC地址和IP绑定. 一种情况下,查询盒子的MAC地址,添加到网络管理的路由规则中即可: 另一种情况下 ...

  6. MySQL 5.7贴心参数之 log_timestamps

    写在前面 使用 MySQL 的过程中,经常会有人碰到这么一个问题,看错误日志.慢查询日志的时候,时间总是和本地时间对不上,差了 8 个小时,这样分析起来就相对麻烦了一些. 新改进 对于不知道是什么原因 ...

  7. 149_best-time-to-buy-and-sell-stock

    /*@Copyright:LintCode@Author:   Monster__li@Problem:  http://www.lintcode.com/problem/best-time-to-b ...

  8. Linux - 进程调度算法

    进程调度: 无论是在批处理系统还是分时系统中,用户进程数一般都多于处理机数.这将导致它们互相争夺处理机.另外,系统进程也同样需要使用处理机. 这就要求进程调度程序按一定的策略,动态地把处理机分配给处于 ...

  9. oracle调用array参数存储过程

    declare -- Non-scalar parameters require additional processing files tyt_gas2014_search; ,); temp1 t ...

  10. 少年，是时候换种更优雅的方式部署你的php代码了

    让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 ...