佛山网站建设no.1/福州短视频seo获客

概念

---

事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当然，如果子元素阻止了事件冒泡，那么委托也就没法实现了。

好处:

1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

4.提高性能

坏处：

1.如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。

案例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参数执行着相关的操作}
}