js中事件委托

目录

 

概念

怎么使用事件委托

事件委托

---

概念

事件委托是把子元素的事件委托给父元素去处理。

优点：
1.大量减少内存占用，减少事件注册。
2.新增元素实现动态绑定事件

怎么使用事件委托

我们事件委托一般都是使用在列表里面的。这里就拿列表举例：

1. 我们在每一个循环的标签身上动态绑定一个自定义属性。
2. 给统一的父元素绑定事件。
3. 在事件中可以通过事件对象来获取自定义属性的值

	<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>

注意1：如果事件需要传参且还需要用到事件对象，那么我们传入的第一个实参就是事件对象。事件对象使用 $event 来传入
注意2：事件委托是利用事件冒泡的原理，所以如果组元素阻止事件冒泡，事件委托将会失效。 

这样是不是明白好多呀！！！-.-