一、使用事件委托

一个简单的需求，比如想给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. Web接口测试-HttpClient

    要实现Web接口测试的自动化有许多方式,比如利用Jmeter.Loadrunner等测试工具都能够实现接口的自动化测试,我们也可以利用一些开源的框架来实现接口的自动化测试,比如我们现在要说的这个Htt ...

  2. [转帖] select、poll、epoll之间的区别总结[整理] + 知乎大神解答 https://blog.csdn.net/qq546770908/article/details/53082870 不过图都裂了.

    select.poll.epoll之间的区别总结[整理] + 知乎大神解答 2016年11月08日 15:37:15 阅读数:2569 http://www.cnblogs.com/Anker/p/3 ...

  3. lamp下mysql安全加固

    lamp下mysql安全加固 1.修改root用户口令,删除空口令 缺省安装的MySQL的root用户是空密码的,为了安全起见,必须修改为强密码,所谓的强密码,至少8位,由字母.数字和符号组成的不规律 ...

  4. centos目录

    cd /opt cd /home/lujie cd /etc cd /usr cd /dev cd /bin cd /mnt cd /media cd /tmp

  5. GlusterFS卷的优化

    GlusterFS可以通过配置选项来优化卷 配置选项 用途 默认值 合法值 network.ping-timeout    客户端等待检查服务器是否响应的持续时间,节点挂了数据不能写入 42 0-42 ...

  6. 使用Java HttpComponent/HttpClinet 调用 WebAPI问题的解决

    几个关键字: WebAPI, Android, Apache HttpComponent/HttpClient 问题:无论怎么测试, WebAPI的FormBody value总是空. 最简单的代码 ...

  7. jquery添加刪除

    創建元素的方法:jquery.javascript/dom,html/text var txt1="<p>Text.</p>";               ...

  8. Migrate Maven Projects to Java 11

    Migrate Maven Projects to Java 11 So you want to migrate to Java 11 but your Maven project is still ...

  9. mysql Packet for query is too large (2036 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.

    解决方法: 打开控制台,输入下面语句,执行 set global max_allowed_packet = 20*1024*1024; 网上说要重启 mysql server, 我是执行完后不用重启就 ...

  10. 自学Zabbix2.3-服务器端server安装过程

    点击返回:自学Zabbix之路 ....