聊一聊JQ中delegate事件委托的好处
下面举个例子
我们希望通过点击使得点击的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事件委托的好处的更多相关文章
- jq中的事件委托：closest，parent，parents，delegate
closest .closest(selector) 从当前元素开始沿 DOM 树向上,获得匹配第一个符合选择器的祖先元素,返回零个或一个元素的 jQuery 对象. .parents() 和 .cl ...
- delegate事件委托
下面举个例子 我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111&l ...
- 【Unity3D技巧】在Unity中使用事件/委托机制（event/delegate）进行GameObject之间的通信 (二) : 引入中间层NotificationCenter
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...
- js和jquery中的事件委托
[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JQuery中的事件委托
JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...
- js中的事件委托或事件代理
一,概述 JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 举一个网上大牛们讲事件委托都会举的例子:就是取快递来解释,有三个同事预 ...
- js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
随机推荐
- 在jsp中用一数组存储了数据库表中某一字段的值，然后在页面中输出其中的值。
List<String> list = new ArrayList<String>(); String sql = "select userName from us ...
- Swift中枚举的总结以及使用
枚举定义了一组具有相关性的数据,是开发者可以再带吗中以一个安全的方式来使用这些值,以又助于提供代码的可读性. 在Swift中,枚举可以分成两种:任意类型的枚举和指定类型的枚举,结构如下: //任意类型 ...
- angular的$http.post()提交数据到Java后台接收不到参数值问题的解决方法
本文地址:http://www.cnblogs.com/jying/p/6733408.html 转载请注明出处: 写此文的背景:在工作学习使用angular的$http.post()提交数据时, ...
- 鸟哥linux私房菜学习笔记，U盘安装centos5.3不能正常引导的问题
前言: 一直都想学习linux,毕竟是做测试的标配.听过鸟哥的linux私房菜大名,作为新手我淘来了第三版,到手看到书的厚度,心都凉了半截,本着不能浪费的原则,还是学吧! 过程: 开始看 ...
- openssl命令行-证书认证
命令1: openssl genrsa -out root.key 1024 产生一个root.key的私钥 命令2: openssl req -key root.key -new -out ro ...
- MidpointRounding 枚举值简要说明
1. MidpointRounding.AwayFromZero 当小数点后取舍时5 时会取绝对值大的如 4.5 会取5 及正常的4舍5入. -- 官方解释翻译解释取绝对值小值感觉反译错了. 2.Mi ...
- hadoop2.8和spark2.1完全分布式搭建
一.前期准备工作: 1.安装包的准备: VMware(10.0版本以上) : 官方网站:https://www.vmware.com/cn.html 官方下载地址:http://www.vmware. ...
- 计算机程序的思维逻辑 (82) - 理解ThreadLocal
本节,我们来探讨一个特殊的概念,线程本地变量,在Java中的实现是类ThreadLocal,它是什么?有什么用?实现原理是什么?让我们接下来逐步探讨. 基本概念和用法 线程本地变量是说,每个线程都有同 ...
- [Git]04 如何使用标签
Git也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做. 本节我们一起来学习如何如何新建标签,列出所有可用的标签,以及各种不同类型标签之间的差 ...
- typedef和define的详细区别
typedef是一种在计算机编程语言中用来声明自定义数据类型,配合各种原有数据类型来达到简化编程的目的的类型定义关键字. #define是预处理指令.下面让我们一起来看. typedef是C语言语句, ...