JS事件委托应用场景
给列表元素添加点击事件：
在javaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能。
<li>标签的数量很大时，循环为每个子元素添加事件，绝非好方法。
有一种优雅的方法，就是事件委托。
使用事件委托只为<ul>元素添加一个onclick事件处理程序。
因为有事件冒泡机制，单击每个<li>标签时，都会被这个函数处理。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <ul id="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> <body>
<script>
document.getElementById('container').addEventListener('click', function (event) {
var target = event.target;
console.log(event)
if (target.tagName == 'LI') {
alert(target.innerText);
}
},false);
</script>
</body> </html>
JS事件委托应用场景的更多相关文章
- JS事件委托学习（转）
JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- js事件委托 jQuery写法
http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...
- 原生js事件委托（事件代理）方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- 彻底弄懂JS事件委托的概念和作用
一.写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- js 事件委托 事件代理
JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...
随机推荐
- 第十九天 标准目录与time 模块
今日内容 1.目录规范 ***** (1)文件夹的规范写法 bin 可执行文件 conf 配置文件 core 主要业务逻辑 db 数据文件 lib 库 (公共代码 第三方模块) log 日志文件 ...
- HDU1505 City Game(算竞进阶习题)
写了1506顺便写下1505.. 还是求矩形面积,不过要预处理一下以每一个F为底的高度,然后想左右扩展到最大长度即为矩形的长.. 计算方法有点绕,令l[i]表示i的左边界,那么初始化l[i] = i. ...
- 【bzoj3456】城市规划（多项式求逆+dp）
Description 求\(~n~\)个点组成的有标号无向连通图的个数.\(~1 \leq n \leq 13 \times 10 ^ 4~\). Solution 这道题的弱化版是poj1737, ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- noiac132 B君的第三题 (树形dp)
传送门 本来想用点分治做,结果root又求不对 算的时候还算错了 我好菜啊 结果szr大佬告诉我是树形dp 我好菜啊!! 我们有$\lceil \frac{x}{k} \rceil = \frac{x ...
- LOJ#6279. 数列分块入门 3
区间加值还是正常的操作,查找前驱的时候用lower_bound查找,然后范围所在位置的值 #include<map> #include<set> #include<cti ...
- Spring Boot 1.X和2.X优雅重启实战
纯洁的微笑 今天 项目在重新发布的过程中,如果有的请求时间比较长,还没执行完成,此时重启的话就会导致请求中断,影响业务功能,优雅重启可以保证在停止的时候,不接收外部的新的请求,等待未完成的请求执行完成 ...
- P1637 三元上升子序列
thair 好,这个naive的东西因为只有三元,很好求解.只要把每个数之前小的L[i]与之后大的R[i]求一下即可. 求两次逆序对即可.那么答案便是∑(L[i]*R[i]); 对于更高元的,胡雨菲写 ...
- 关于react-native在MacBookPro环境下的安装
都说欲善其事,必先利其器. 使用macbook写react-native 环境真的非常容易配置 先看效果 然后我们看安装需要的东西 brew install node brew install wat ...
- IE jQuery ajax 请求缓存问题
我最近在IE下测试开发我们的系统,经常出现改过的jsp页面,刷新IE后也不能显示,这就是IE的缓存问题,查了一下百度,说是IE9在ajax进行请求时,如果两次请求url相同,则不会请求服务器,而是从缓 ...