开发者社区> Tinywan.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript 从入门到放弃(一)事件委托和使用innerHTML添加元素

简介: 一、使用事件委托 一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML。这个貌似很简单!代码如下! DOCTYPE html> 0 1 2 3 4 5 6 7 8 9 var $ul = document.
+关注继续查看

一、使用事件委托

一个简单的需求,比如想给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.timeconsole.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实现省市区三级联动选择的代码(数据为模拟json数据)
javascript实现省市区三级联动选择的代码(数据为模拟json数据):
0 0
JavaScript实现四则运算
JavaScript实现四则运算
0 0
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
0 0
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
0 0
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
0 0
JavaScript实现搜索框效果
JavaScript实现搜索框效果
0 0
JavaScript实现九九乘法表
JavaScript实现九九乘法表
0 0
JavaScript实现倒计时
JavaScript实现倒计时
0 0
JavaScript 实现字符串驼峰式与下划线式互相转换
JavaScript 实现字符串驼峰式与下划线式互相转换
0 0
JavaScript中实现继承的几种方法
JavaScript中实现继承的几种方法
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载