js事件委托是什么？使用事件委托又有哪些好处？相信很多的朋友或许会有这样的疑问，那么，接下来的这篇文章就给大家来说一说关于js事件委托的概念以及使用js事件委托的好处。
1、什么是js事件委托？
利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托，简单点来说就是给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件，更加通俗一点那就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。（事件有哪些？请看：javascript中文参考手册）
比如下面这个例子：原生js实现事件委托
<!doctype html><html><head><title>事件委托测试</title></head><body><style type="text/css">*{margin: 0;padding: 0;}a{text-decoration: none;}ul,li{list-style: none;}div{display: block;width: 500px;padding: 200px 0 0 200px;}div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}div ul li:nth-child(2n){background: #f00;}</style><div> <ul> <li><a>测试1</a></li> <li><a>测试2</a></li> <li><a>测试3</a></li> <li><a>测试4</a></li> <li><a>测试5</a></li> <li><a>测试6</a></li> <li><a>测试7</a></li> <li><a>测试8</a></li> </ul></div><script type="text/javascript">document.getelementsbytagname("ul")[0].addeventlistener('click',function(e){ alert("点击的内容是："+e.target.innerhtml);});</script></body></html>
注意：js实现事件委托有三个步骤：
第一步：给父元素绑定事件
给元素ul添加绑定事件，通过addeventlistener为点击事件click添加绑定
第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡
第三步：找到是哪个子元素的事件
通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标
2、js事件委托的好处：
事件委托的好处1：事件委托技术可以避免对每个字元素添加事件监听器，减少操作dom节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
我们可以看一个例子：我们要做动态的添加li。点击button动态添加li
<input type="button" id="btn" /><ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li></ul>
不用事件委托我们会这样做：
window.onload = function(){ var oul = document.getelementbyid("ul"); var ali = oul.getelementsbytagname("li"); var obtn = document.getelementbyid("btn"); var inow = 4; for(var i=0; i<ali.length; i++){ ali[i].onmouseover = function(){ this.style.background = "red"; } ali[i].onmouseout = function(){ this.style.background = ""; } } obtn.onclick = function(){ inow ++; var oli = document.createelement("li"); oli.innerhtml = 1111 *inow; oul.appendchild(oli); } }
这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
因为点击添加的时候for循环已经执行完毕。
那么我们用事件委托的方式来做。就是html不变
window.onload = function(){ var oul = document.getelementbyid("ul"); var ali = oul.getelementsbytagname("li"); var obtn = document.getelementbyid("btn"); var inow = 4; oul.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcelement; //alert(target.innerhtml); if(target.nodename.tolowercase() == "li"){ target.style.background = "red"; } } oul.onmouseout = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcelement; //alert(target.innerhtml); if(target.nodename.tolowercase() == "li"){ target.style.background = ""; } } obtn.onclick = function(){ inow ++; var oli = document.createelement("li"); oli.innerhtml = 1111 *inow; oul.appendchild(oli); }}
事件委托的好处2：使用事件委托，只有父元素与dom存在交互，其他的操作都是在js虚拟内存中完成的，这样就大大提高了性能。
相关推荐：
js中的事件委托
javascript事件委托和jquery事件绑定on、off 和one
以上就是js事件委托是什么？使用js事件委托的好处有哪些？的详细内容。