说一下事件委托

[问答题]

请你简要介绍一下事件委托，能举个简单的例子吗？使用事件委托的好处是什么？

波比巴卜

事件委托利用事件冒泡机制指定一个事件处理程序，用来管理某一类型的所有事件。在操作dom动态添加元素而该元素正好也要绑定事件，那么把该事件绑定在其父元素上通过target获取真实目标，就可以给该元素也绑定上事件，这样做的好处是只在内存中开辟了一块空间，节省资源同时减少了dom操作。

发表于 2019-01-01 19:11:40 回复(2)

伯乐在线

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

	<ul id="my-ul">
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	    <li>4</li>
	    <li>5</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>

从代码的可观性和冗余性以及后期维护性来看更友好

编辑于 2020-01-08 00:51:39 回复(0)