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 );
});
});
delegate事件委托的更多相关文章
- 聊一聊JQ中delegate事件委托的好处
下面举个例子 我们希望通过点击使得点击的li标签变红 <body style="height:2000px;"> <ul> <li>1111&l ...
- jq中的事件委托：closest，parent，parents，delegate
closest .closest(selector) 从当前元素开始沿 DOM 树向上,获得匹配第一个符合选择器的祖先元素,返回零个或一个元素的 jQuery 对象. .parents() 和 .cl ...
- 【Unity3D技巧】在Unity中使用事件/委托机制（event/delegate）进行GameObject之间的通信 (二) : 引入中间层NotificationCenter
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...
- c#中的delegate（委托）和event（事件）
c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...
- 转载： jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...
- 事件委托live,delegate,on区别
事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一 ...
- 事件/委托机制（event/delegate）（Unity3D开发之十七）
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/46539433 ...
- jQuery事件委托方法 bind live delegate on
1.bind jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法: bind(type,[data],function(e)); 特点: a.适合页 ...
- 关于事件委托的整理 ，另附bind,live,delegate,on区别
随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...
随机推荐
- 灰度发布/AB test
背景 互联网产品有一个特点,就是不停的升级,升级,再升级.一般采用敏捷开发的团队,基本上保持每周一次的发布频率,系统升级总是伴随着风险,新旧版本兼容的风险,用户使用习惯突然改变而造成用户流失的风险,系 ...
- PHP的SQL语句优化
(转)仅供自己学习,特此转发 普遍遇到的慢SQL有以下三种: 1.未走索引 2.where条件里包含子查询,多表联查 3.查询大量数据 解决 一.索引:SQL中的高速公路 但凡优化SQL,首先要看的就 ...
- 第二篇-Django建立数据库各表之间的联系（中）
上篇中已经建立了两个table,Book和Publish.这篇介绍如何用python增删改查数据库中的数据. 在views.py中创建一个index函数 from django.shortcuts i ...
- Dubbo新版管控台
地址:https://github.com/apache/incubator-dubbo-ops 下载下来,解压 打开cmd 注意:它的前端用到了Vue.js,打包需要npm,所以你要有node.js ...
- 如何自学 Android 的？
http://android.jobbole.com/83380/ 1. Java知识储备 本知识点不做重点讲解:对于有基础的同学推荐看<Java编程思想>,巩固基础,查漏补全,了解并熟悉 ...
- Mac上在终端上解压与压缩
1.安装rar 1.brew install unrar 2.unrar -version 3.进入需要解压的文件目录下,unrar x 文件夹名.rar 1.tar -xvf [file.tar.g ...
- opencv源码学习： getStructuringElement函数;
getStructuringElement函数归属于形态学,可以建立指定大小.形状的结构: 原型: /** @brief Returns a structuring element of the sp ...
- 【矢量绘图工具】Adobe Illustrator (AI) CC 2019 for Mac 23.0
以上图片来源于互联网分享,如涉及版权问题请联系作者删除. 文章素材来源:风云社区(www.scoee.com) 下载地址:风云社区(www.scoee.com) [简介] Adobe illust ...
- 如何用MTR诊断网络问题
MTR 是一个强大的网络诊断工具,管理员能够用它诊断和隔离网络错误,并向上游提供商提供有关网络状态的有用报告.MTR 通过更大的采样来跟踪路由,就像 traceroute + ping 命令的组合.本 ...
- 深入浅出 JavaWeb：Servlet必会必知
一.Web服务器 从事web开发的人,会很清楚一个东西叫HTTP服务器,比如JEE开发—Tomcat,Jetty,.NET开发—ISS等.HTTP服务器是使用 HTTP(超文本传输协议) 与客户机浏览 ...