【JS深入学习】——事件代理/事件委托
事件代理/事件委托(event delegation)
需求一:当一个div内部有多个事件发生,给每个元素逐个添加事件十分麻烦...
需求二:在项目中我们常常需要动态的添加元素,不可避免的需要为那些未来添加的元素增加事件...
我们:怎么办呢?
事件委托:我可以!使用我能让你避免对特定的每个节点添加事件监听器。
我们:你到底是什么鬼?
事件委托:我又叫事件代理,说白了就是利用浏览器事件捕获和冒泡的原理,将事件监听器添加到特定节点的父元素上,我就会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。
举个栗子:
$(parentsEle).click(function (e) {
var e = e || window.event,
targetEle = e.target || e.srcElement,
_this = this;
switch (targetEle.className) {
case "font_r":
$(targetEle).fadeOut();
_this.siblings(".header").fadeIn();
break;
}
})
明白了吗?
【JS深入学习】——事件代理/事件委托的更多相关文章
- js事件代理(委托)
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
- JavaScript事件代理和委托
在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中de ...
- JS中事件代理与委托
在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...
- JavaScript事件代理和委托(Delegation)
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- javascript事件代理(委托)
之前有接触过事件代理,但是印象并不深刻.这次记下来加强印象. 用个大家比较常见的代码举例子: html dom结构: <ul id="ul1"> <li>0 ...
- 事件代理/事件委托----点击li弹出对应的下标和内容
<body> <ul> <li>这是第一行</li> <li>这是第二行</li> <li>这是第三行</li ...
- js中的事件代理(委托)
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这 ...
- 【JS深入学习】——animationend 事件兼容性说明
animationend 1.兼容性 animationend只有两种形式:animationend和webkitAnimationEnd webkitAnimationEnd 中 w 一定要小写,a ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
随机推荐
- dedecms操作数据库
重要的事情说三遍:代码复制完要格式化,格式化,格式化,最好重新抄一遍,小心陷阱 一.配置数据库配置文件路径/data/common.inc.php二.连接数据库dirname(__FILE__)表示当 ...
- Java数据结构和算法(二)树的基本操作
Java数据结构和算法(二)树的基本操作 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 一.树的遍历 二叉树遍历分为:前序遍 ...
- 检测空值,以及会不会出现mapping类型不一致的问题
/// <summary> /// 检测空值,以及会不会出现mapping类型不一致的问题 /// </summary> /// <typeparam name=&quo ...
- 关于多系统跨浏览器 BrowserStack 的使用
偶然在Scott Hanselman Blogs看到一篇关于 BrowserStack 博文,对于前端多浏览器测试. 现在拥有各自内核的浏览器越来越多,各自的特性也千差万别.如果作为一个前端攻城师想要 ...
- 网站SEO优化的方法
网站SEO优化的方法: 1.url静态化和规范化:url中都去掉了index.php这样的后缀网址形式,目的就是让网站的层级更浅,获得的权重更高 代码中可以使用urlrewrite重写. 2.域名30 ...
- 2018.09.14 洛谷P3931 SAC E#1 - 一道难题 Tree(树形dp)
传送门 简单dp题. f[i]表示以i为根的子树被割掉的最小值. 那么有: f[i]=min(∑vf[v],dist(i,fa))" role="presentation" ...
- phalApi框架打印SQL语句
http://demo.phalapi.net/?service=User.getBaseInfo&user_id=1&__sql__=1
- 通过wsdl生成client 的几种方式
wsimport 位置 %JAVA_HOME%/bin/wsimport.exe 帮助 wsimport -help Usage: wsimport [options] <WSDL_URI> ...
- (连通图 ) Redundant Paths --POJ --3177
链接: http://poj.org/problem?id=3177 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82833#probl ...
- Linux应用程序中使用math库报undefined reference to `sin'等
出现该问题是因为在Linux中,sin,sqrt等函数是在libm.so库文件中,并非在math.h中. 解决办法:在Ubuntu的gcc编译环境下,直接使用lm参数即可,例如gcc -o Gen G ...