JS中的事件委托实例浅析

154 阅读 0 评论 102 点赞

我是靠谱客的博主闪闪荷花，最近开发中收集的这篇文章主要介绍JS中的事件委托实例浅析，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了JS中的事件委托。分享给大家供大家参考，具体如下：

事件委托（也叫事件代理），其实这个问题也简单，要想弄明白事件委托，我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子：

<ul>
    <li>点击</li>
</ul>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li')[0];
    ul.addEventListener('click', function(){
      alert('我是ul,我被点击了');
    }, false);
    li.addEventListener('click', function(){
      alert('我是li,我被点击了');
    }, false);
</script>

在这段代码中，当我们点击li的时候出发了li的click事件，但是在这时，ul的click事件也被触发了，这就是事件的冒泡。搞明白这个之后，我们就可以来说事件委托了，既然事件能从子元素(li)冒泡的父元素(ul)身上，那么我们就可以给ul自己加一个click事件，把所有li的事件都委托给了我们的父级(ul)身上，可能到这里有些朋友还是不明白这个事件委托到底有什么用，我们在举一个事件委托的实例来说明一下：

<ul>
    <li>点击1</li>
    <li>点击2</li>
    <li>点击3</li>
    <li>点击4</li>
    <li>点击5</li>
</ul>
<script>
    //使用事件委托的代码
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click', function(e){
      alert(e.target.innerHTML);
    }, false);
    //不使用事件委托，循环给li添加click事件
    var li=document.getElementsByTagName('li')
    for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
        alert(this.innerHTML);
      }
    }
</script>

我们以上代码把事件委托给了ul，只给ul增加点击事件，在浏览器中运行点击对应的li会弹出li对应的innerHTML，这个function(e){};中的e这个参数实际上就是当前我们点击li时，系统传给我们的一些事件信息,e.target实际上指的就是当前我们点击的这个li，在这里我们每次弹出的都是当前点击对象的innerHTML，这就是一个简单的事件委托的案例。

而事件委托对于我们优化代码意义是非常大的，我们都知道，频繁的dom操作是非常耗费性能的，现在ul里边是5个li，我们假如不用事件委托实现上面代码所作的事情，就需要用for循环，给每个li都写一个click事件，这样一来dom操作就比较多了，如果是10个li呢，100个甚至更多呢，单不说dom操作影响的性能，li过多for循环自身就会占用大量的事件。如果利用事件委托，既避免了for循环耗费的性能，又省去了繁多的dom操作耗费的性能。

PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.uoften.com/table/javascript_event

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。