jQuery系列（十二）：事件委托
1、什么是事件委托
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
原理：
利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
性能要好
针对新创建的元素，直接可以拥有事件
事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的
使用情景：
•为DOM中的很多元素绑定相同事件；
•为DOM中尚不存在的元素绑定事件；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <ul>
<li class="felix">felix</li>
<li>fff</li>
<li>fff</li> </ul>
</body>
<script src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//通过on()方法
$('ul').on('click','#name,.felix',function(){
console.log(this);
});
//未来追加的元素
$('ul').append('<a id="name">relix</a>')
})
</script>
</body>
</html>
语法：
on(type,selector,data,fn);
描述：在选定的元素上绑定一个或多个事件处理函数
event.data。jQuery系列（十二）：事件委托的更多相关文章
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- SQL Server 2008空间数据应用系列十二：Bing Maps中呈现GeoRSS订阅的空间数据
原文:SQL Server 2008空间数据应用系列十二:Bing Maps中呈现GeoRSS订阅的空间数据 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Se ...
- Alamofire源码解读系列(十二)之请求(Request)
本篇是Alamofire中的请求抽象层的讲解 前言 在Alamofire中,围绕着Request,设计了很多额外的特性,这也恰恰表明,Request是所有请求的基础部分和发起点.这无疑给我们一个Req ...
- struts2官方 中文教程 系列十二：控制标签
介绍 struts2有一些控制语句的标签,本教程中我们将讨论如何使用 if 和iterator 标签.更多的控制标签可以参见 tags reference. 到此我们新建一个struts2 web 项 ...
- 爬虫系列(十二) selenium的基本使用
一.selenium 简介 随着网络技术的发展,目前大部分网站都采用动态加载技术,常见的有 JavaScript 动态渲染和 Ajax 动态加载 对于爬取这些网站,一般有两种思路: 分析 Ajax 请 ...
- C#编程（四十二）----------委托和事件
委托和事件 委托是C#总比较重要的概念,学习C#爱这里最容易产生迷惑. 有些时候,犹豫我们在开发程序时对后续可能出现的要求及变化考虑不足而导致麻烦,这些新变化可能导致程序的重新编写,那能不能改变这种情 ...
- Alamofire源码解读系列(十二)之时间轴(Timeline)
本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
- 学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 【jQuery源码】事件委托
jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事 ...
- jquery on方法（事件委托）
jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...
随机推荐
- Python 基础（十六）--随机数模块
random随机数模块 random.randint(1,10):随机1-10包括10 random.randrange(1,10,2):在1.3.5.7.9中随机,类似切片,不包括10 random ...
- spark机器学一Mllib 数据抽象
spark 提供了两个机器学习库 MLlib 和 ML,MLlib 是 spark 第一个机器学习库,相比于 ML,它更加成熟 rdd 是 spark core 的数据抽象,dataframe 是 s ...
- jquery tablesorter 动态加载数据时，排序。过滤失效解决方案
解决方案:重置更新: $("table").trigger("update"); 1 官方 ajax表格数据添加实例: $(document).ready(fu ...
- luogu P4762 [CERC2014]Virus synthesis (回文自动机)
大意: 初始有一个空串, 操作(1)在开头或末尾添加一个字符. 操作(2)在开头或末尾添加该串的逆串. 求得到串$S$所需最少操作数. 显然最后一定是由某个偶回文通过添加字符得到的, 那么只需要求出所 ...
- 在生产环境中使用Compose 【翻译】
在生产环境中使用Compose 在开发环境中使用Compose定义你的应用,可以使用此定义在不同的环境,(如 CI.暂存和生产)中运行应用程序. 部署应用程序的最简单方法是在单个服务器上运行该应用程序 ...
- C++ STL 之 multimap案例之员工分组
#include <iostream> #include <vector> #include <map> #include <string> #incl ...
- JDK,JRE,JVM 关系和概念
JDK : Java Development ToolKit(Java开发工具包).JDK是整个JAVA的核心,包括了Java运行环境(Java Runtime Envirnment),一堆Java工 ...
- 【转载】python format遇上花括号{}
在format string中, 大括号已经被format占用,想要使用大括号本身,该怎么办? 以下转载自这里. ============ 分割线 ============ 使用format时,字符串 ...
- django的几种缓存配置
前言 首先说,为什么要用缓存的,由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存 ...
- vi和vim的使用
本章内容: vi编辑器简介 vim基本使用 vim使用技巧 一.vim简介 vim是一个全屏幕纯文本编辑器,是vi编辑器的增强版. 二.vim的基本使用 1.vim的工作模式 命令模式:是主要使用快键 ...