JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素
一、使用事件委托
一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
<script type="text/javascript">
var $ul = document.getElementById('ul-test');
var $li = $ul.getElementsByTagName('li');
for (var i = 0, $len = $li.length; i < $len; i++) {
$li[i].addEventListener('click',function () {
alert(this.innerHTML);
})
}
</script>
</html>
很简单，这样就实现了，实际上这里有坑，也待优化！
1.for循环，循环的是li，10个li就循环10次，绑定10次事件，100个就循环了100次，绑定100次事件！
2.如果li不是本来就在页面上的，是未来元素，是页面加载了，再通过js动态加载进来了，上面的写法是无效的，点击li是没有反应的！
所以就者需要用事件委托（即使不考虑上面的第二种情况，也是建议使用事件委托）！代码如下：
<script type="text/javascript">
var $_ul = document.getElementById("ul-test");
$_ul.addEventListener("click", function (ev) {
var $ev = ev || window.event;
var target = $ev.target || $ev.srcElement;
//如果点击的最底层是li元素
if (target.tagName.toLowerCase() === 'li') {
alert(target.innerHTML)
}
})
</script>
这样写，即使是动态添加进来的li点击也有反应，还有一个就是ul只有一个，事件绑定在ul上，无论li多少个，都是添加一次事件！但是也是可能会有问题，如果li下面还有子元素，那么点击的时候，target可能不是li，而是鼠标点击那个位置的最底层元素！如下图，如果鼠标点击白色区域，那个target就是body元素,鼠标点击绿色区域target就是div元素，鼠标点击蓝色区域target就是ul，点击橙色就是li。
二、使用innerHTML添加元素
1、createElement方式创建
<ul id="ul-test"> </ul> <script type="text/javascript">
var $_ul = document.getElementById("ul-test");
//createElement方式
console.time();
for(var i =0;i<10;i++){
var $li = document.createElement('li');
$li.innerHTML = i;
$_ul.appendChild($li);
}
console.timeEnd();
</script>
注意：console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。
耗时：ul-test: 0.18603515625ms
2、innerHTML方式创建
<ul id="ul-test2"> </ul>
<script type="text/javascript">
var $_ul = document.getElementById("ul-test2");
//innerHTML方式
console.time('ul-test2');
var _html='';
for(var i=0;i<10;i++){
_html+='<li>'+i+'</li>'
}
$_ul.innerHTML=_html;
console.timeEnd('ul-test2');
</script>
耗时：ul-test2: 0.0849609375ms
两个耗时对比：
发现基本是第二种方式更快，第8点也说了，DOM操作能少就少！第一种要操作10次DOM，第二种只需要操作1次DOM。还有一个就是，这个只是很简单的li,如果是下面的列表呢？用第一种方式，得createElement多少次，innerHTML多少次，appendChild多少次？代码多，各个节点的逻辑和嵌套关系也乱！用第二种方式就是一个拼接字符串的操作，比第一种方式好多了，如果用es6的模板字符串，就更简单了！
JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素的更多相关文章
- javascript 冒泡和事件源 形成的事件委托
冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生. 事件源:首先这个东西是有兼容行问题的,当然解决也很简单. 两者结合使用,形成的事件委托有两个优势: 1.减少性能消耗: 2 ...
- JavaScript 从入门到放弃（二）模块化工具requirejs
入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...
- 初学JavaScript从入门到放弃（一）JavaScript介绍、变量、数据类型
一.JavaScript介绍 1.JavaScript:轻量级的客户端脚本语音 2.目前js已经不仅仅是客户语音,基于NODE可以做服务器端程序,所以Javascript是全栈编程语音 3.js及部分 ...
- 【JavaScript从入门到放弃】JS基础-01
作为一个前端开发人员,JS是我们行走江湖吃饭的家伙.基本上一个前端人员能值多少大洋,就看JS了.虽然各种框架层出不穷,但是归根结底学好原生JS才是硬道理. 学习任何新东西其实都遵循 10000 小时成 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript事件代理和事件委托
一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...
- JavaScript中的事件委托（转至大佬）
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- js_事件委托
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
随机推荐
- Vue 的语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- liuyan
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- LY tomcat 的闪退问题
http://www.cnblogs.com/1693977889zz/archive/2018/04/06/8726920.html 在bin文件夹里打开此文件setclasspath.bat 举例 ...
- 关于安装 rst2pdf 时遇到的 setuptools过老的问题
由于想把flask里面的.rst文档 转一些成pdf方便查看和翻阅(.rst文档都非常新一直在维护) 所以查到一个模块rst2pdf 安装好之后却发现警告里面提示我的setuptools版本过老无法运 ...
- YII2十三大特性
第一(框架&项目) 1. 框架安装 2. 框架扩展安装 3. 项目初始化-->php yii init 4. 美化URL配置 'urlManager' => [ 'enablePr ...
- BZOJ2351[BeiJing2011]Matrix——二维hash
题目描述 给定一个M行N列的01矩阵,以及Q个A行B列的01矩阵,你需要求出这Q个矩阵哪些在原矩阵中出现过.所谓01矩阵,就是矩阵中所有元素不是0就是1. 输入 输入文件的第一行为M.N.A.B,参见 ...
- BZOJ5251 八省联考2018劈配（网络流）
劈配,匹配,网络流.那么考虑怎么跑网络流. 先看第一问.首先套路的建出超源超汇.不用想也知道导师向汇连容量为战队人数上限的边.特别地,给出局也建一个点,向汇连容量inf的边(似乎没有必要).对于一个新 ...
- Codeforces Round #431 (Div. 2) B. Tell Your World
B. Tell Your World time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- 述 SQL 中的 distinct 和 row_number() over() 的区别及用法
1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...
- 监控(1)-企业常用服务监控shell
-----------------企业监控------------------------主动探测监控(“监控机”主动探测“被监控机”)HTTP服务器监控#!/bin/shLANG=C#被监控服务器. ...