事件委托（事件代理）的简单例子，看完就懂

╰+攻爆jí腚メ 2021-11-13 22:50 459阅读 0赞

# 使用背景 #

事件委托常用在导航和列表中，话不多说，直接上例子。

这样一个列表，要实现的要求也很简单，点击某一项时，弹出它对应内容。

### 普通写法 ###

<ul id="my-ul">
    	    <li onclick="alertText(this)">1</li>
    	    <li onclick="alertText(this)">2</li>
    	    <li onclick="alertText(this)">3</li>
    	    <li onclick="alertText(this)">4</li>
    	</ul>
    	<script> function alertText(ele){ alert(ele.innerText) } </script>

普通写法为给每个 li 设置一个点击事件，然后弹出它对应的内容，这样写当然也是没问题的，但是如果要增加 li 或者li比较多的情况，比如下面这样：

这样为每个 li 设置点击事件当然也不是不行，但是这样代码的可观性和冗余性就比较差，所以此时就可以用到事件委托。

### 事件委托 ###

将 li 的点击事件交给它的父级 ul 来执行，因为点击 li 时会进行事件的冒泡，所以父级元素的点击事件也可以执行，那么问题就变成只用给 ul 添加点击事件就行了，像下面这样：

script>
    	   let myUl = document.getElementById("my-ul");
    	   myUl.addEventListener('click',function(e){ 
    	       if(e.target.tagName == "LI"){ //如果点击的目标的标签名为LI
    	           alert(e.target.innerText)
    	       }
    	   })
    	</script>

感觉都不用解释了，如果对事件捕获和事件冒泡不是很了解的可以查看我以前的博客，里面有简单的介绍。是不是很简单！会了吧！！！