一、使用事件委托

一个简单的需求，比如想给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实用技巧和写法建议

JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素的更多相关文章

  1. javascript 冒泡和事件源 形成的事件委托

    冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生. 事件源:首先这个东西是有兼容行问题的,当然解决也很简单. 两者结合使用,形成的事件委托有两个优势: 1.减少性能消耗: 2 ...

  2. JavaScript 从入门到放弃（二）模块化工具requirejs

    入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...

  3. 初学JavaScript从入门到放弃（一）JavaScript介绍、变量、数据类型

    一.JavaScript介绍 1.JavaScript:轻量级的客户端脚本语音 2.目前js已经不仅仅是客户语音,基于NODE可以做服务器端程序,所以Javascript是全栈编程语音 3.js及部分 ...

  4. 【JavaScript从入门到放弃】JS基础-01

    作为一个前端开发人员,JS是我们行走江湖吃饭的家伙.基本上一个前端人员能值多少大洋,就看JS了.虽然各种框架层出不穷,但是归根结底学好原生JS才是硬道理. 学习任何新东西其实都遵循 10000 小时成 ...

  5. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  6. JavaScript事件代理和事件委托

    一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...

  7. JavaScript中的事件委托（转至大佬）

    转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...

  8. js_事件委托

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  9. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

随机推荐

  1. js原生常用事件event

    onblur 元素失去焦点: onchange用户改变域的内容: onclick鼠标点击对象: onerror当加载图片时发生错误: onfocus 元素获得焦点: onkeypress某个键盘的键被 ...

  2. Oracle10.2.0.1以及其他版本升级Oracle10.2.0.5的简单步骤

    Oracle没有发布 完整版的 Oracle 10.2.0.5 的安装包,只能是通过安装完10.2.0.4 之后再升级10.2.0.5 这一点挺坑的. 建安记录一下步骤. 1. 挂载Oracle10. ...

  3. Jfrog Maven jenkins pipeline 流水线 培训 简单实验

    1. 公司购买了一套jfrog artifactory ,然后厂商组织了一次培训 本次简单记录一下 jenkins和jfrog 二进制仓库的简单连接使用 2. 前期环境准备. scp jdk的tar包 ...

  4. C++ 类的静态成员变量及静态成员函数

    ps:下面所说 成员＝成员变量+成员函数: 作用 由于对象与对象之间的成员变量是相互独立的.所以要想共用数据,则需要使用静态成员和静态函数. 空间分配 静态成员是在程序编译时分配空间,而在程序结束时释 ...

  5. js & float number bug

    js & float number bug 前端最好不要处理任何的 float number 的计算/精确度转换的操作,不热很容易丢失精度,显示错误! 前端显示个 0.0 都很费劲,最好的方式 ...

  6. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 6. 条件

    前面的教程中,我们已经可以让小海龟绘制出各种图形了.但是,所有绘图的代码都是预先编好的,程序一旦运行起来,运行结果(绘制的图形)就是固定不变的.这一节中,咪博士将教大家如何让海龟响应用户的输入. im ...

  7. java程序在windows系统作为服务程序运行

    Java程序很多情况下是作为服务程序运行的,在Un*x 平台下可以利用在命令后加“&”把程序作为后台服务运行,但在Windows下看作那个Console窗口在桌面上,你是否一直担心别的同时把你 ...

  8. codeforces706C

    Hard problem CodeForces - 706C 现在有 n 个由小写字母组成的字符串.他想要让这些字符串按字典序排列,但是他不能交换任意两个字符串.他唯一能做的事是翻转字符串. 翻转第  ...

  9. spring cloud 入门系列一：初识spring cloud

    最近看到微服务很火,也是未来的趋势, 所以就去学习下,在dubbo和spring cloud之间我选择了从spring cloud,主要有如下几种原因: dubbo主要专注于微服务中的一个环节--服务 ...

  10. MT【208】埃尔米特恒等式

    设$S=\sum\limits_{k=1}^{+\infty}[\dfrac{116+3^{k-1}}{3^k}]\\T=\sum\limits_{k=1}^{+\infty}[\dfrac{116+ ...