轻松理解事件委托（事件代理）的例子

使用背景

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

	<ul id="my-ul">
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	    <li>4</li>
	</ul>

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

普通写法

	<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比较多的情况，比如下面这样：

	<ul id="my-ul">
	    <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>
	    <li>10</li>
	    <li>11</li>
	    <li>12</li>
	    <li>13</li>
	    <li>14</li>
	    <li>15</li>
	    <li>16</li>
	    <li>17</li>
	    <li>18</li>
	    <li>19</li>
	    <li>20</li>
	</ul>

这样为每个 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>

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