概念
事件委托,顾名思义,就是将本来需要 A 处理的事情,委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。当然,如果子元素阻止了事件冒泡,那么委托也就没法实现了。
好处:
1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。
2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。
案例1
需要触发每个li来改变他们的背景颜色。
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
12345
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
}
12345678910111213
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
/*
这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
ie:window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
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 = "";
}
}
}
12345678910111213141516171819202122232425262728
在vue中应用场景(还有很多,自己想)
我们经常遇到vue中v-for一个列表,列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听,从性能方面来说是不太好的。那我们我们如何用委托的形式来实现呢。
获取item元素中title值为edit的id
//html
<table @click="edit">
<tr v-for="item in list">
<td>{
{
item.name}}</td>
...
<td>
<button :data-id="item.id" title="eidt">编辑</button>
</td>
</tr>
</table>
//js
edit (event){
if(event.target.title == "edit"){
//如果点击到了edit
let id = evenr.target.dataset.id;
//拿着id参数执行着相关的操作
}
}