一、使用事件委托

一个简单的需求，比如想给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. Java解析Excel

    前两天总结了些关于Excel和CSV结合TestNG进行数据驱动测试的例子,对于Excel存放TestCase和关键字如何进行解析,也做了对应的总结,希望在学习的路上勇往直前,有不对的地方,希望大家指 ...

  2. [转帖]速度快散热好 为什么U.2 SSD还没普及？

    速度快散热好 为什么U.2 SSD还没普及?   经典的影视剧中总有那么几位武林高手,江湖上只闻其名,不见其形.今天我们要聊的这位爷,誓要拳打南山M.2,脚踩北海SATA 3!它就是固态硬盘界久负盛名 ...

  3. PP学习笔记-业务基础

    生产主数据.生产计划.生产订单与生产执行 生产模块主要子模块及功能:PP-BD 基本数据管理 PP-SFC车间订单管理 PP-MRP物料需求计划 PP-MPS主生产计划 PP-CRP能力计划 PP-I ...

  4. Ideal test 不执行main方法了

    参考:idea 导入项目后不能执行main方法 用了ideal之后,发现自己的项目里面没有test文件夹,自己建了一个,发现竟然不能执行main函数, 后来经过点播之后,才知道,光建立文件夹是没用的, ...

  5. s-axis-config-tdata

  6. Linux共享库LD_LIBRARY_PATH与ld.so.conf

    1. 往/lib和/usr/lib里面加东西,是不用修改/etc/ld.so.conf的,但是完了之后要调一下ldconfig,不然这个library会找不到 2. 想往上面两个目录以外加东西的时候, ...

  7. ceph API之PHP的S3-SDK包的泛域名解析问题

    安装dns工具包yum -y install bind-utils 安装dns软件 yum install -y dnsmasq 配置dnsmasq的配置文件:/etc/dnsmasq.conf li ...

  8. BZOJ2135 刷题计划（贪心+二分）

    相邻数作差后容易转化成将这些数最多再切m刀能获得的最小偏差值.大胆猜想化一波式子可以发现将一个数平均分是最优的.并且划分次数越多能获得的偏差值增量越小.那么就可以贪心了:将所有差扔进堆里,每次取出增量 ...

  9. 在 Linux 上安装配置 BitTorrent Sync [转]

    背景介绍:目前我们线上的前端服务器数量比较多,超过200多台,每次发布新应用的时候,都是将软件包放在一台专门的Push服务器上,再由所有的前端服务器通过rsync自动同步.但随着前端服务器的数量越来越 ...

  10. [luogu3978][bzoj4001][TJOI2005]概率论【基尔霍夫矩阵+卡特兰数】

    题目描述 为了提高智商,ZJY开始学习概率论.有一天,她想到了这样一个问题:对于一棵随机生成的n个结点的有根二叉树(所有互相不同构的形态等概率出现),它的叶子节点数的期望是多少呢? 判断两棵树是否同构 ...