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版本中已 ...
随机推荐
- ES6——入门学习指南
ES6的简介: ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序 ...
- python之并发编程（概念篇）
一.进程 1.什么是进程 进程是正在进行的一个过程或者一个任务.而负责执行任务的则是cpu. 2.进程与程序的区别 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程 ...
- 【Python基础】11_Python中的字符串
1.字符串的定义 可以使用""双引号,也可以使用''单引号定义字符串,一般使用双引号定义. 2.字符串的操作 判断类型: 查找和替换 大小写切换: 文本对齐 注:string.ce ...
- jsp页面报错,各种错误码意思
基本原则: 2xx = Success(成功) 3xx = Redirect(重定向) 4xx = User error(客户端错误) 5xx = Server error(服务器端错误) 状态码 ( ...
- S02_CH04_User_IP实验Enter a post title
S02_CH04_User_IP实验 4.1 创建IP 在之前的教程中,我们通过MIO与EMIO来控制LED,所使用的也是官方的IP,实际当中,官方提供的IP不可能涵盖到方方面面,用户需要自己编写硬件 ...
- C# Base64 操作类
using System; using System.Text; namespace VWFC.IT.CUP.BLL.Util { /// <summary> /// Base64 too ...
- gdb-example-ncurses
gdb-example-ncurses http://www.brendangregg.com/blog/2016-08-09/gdb-example-ncurses.html 1. The Prob ...
- 使用XPath爬取网页数据
我们以我的博客为例,来爬取我所有写过的博客的标题. 首先,打开我的博客页面,右键“检查”开始进行网页分析.我们选中博客标题,再次右键“检查”即可找到标题相应的位置,我们继续点击右键,选择Copy,再点 ...
- Python诞生以来意义菜谱
自Python诞生以来,它被誉为最简单的编程语言.进入人工智能时代后,它逐渐成为编程领域的主导语言. Python是一种快速.强大.高效和灵活的编程语言家常菜做法大全.学习后,无论您是想进入数据分析菜 ...
- Django 之form简单应用
form组件 参考链接:https://www.cnblogs.com/maple-shaw/articles/9537309.html form组件的作用: 1.自动生成input框 2.可以对数据 ...