-
定义：通俗的讲，事件就是
onclick，onmouseover，onmouseout等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 - 原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
- 好处：1. 减少dom的遍历与dom操作，提高性能。2. 动态新添加的元素还会有之前的事件。
示例：鼠标放置到li上后改变当前li背景色
html：
<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");
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
}
利用遍历就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
使用事件委托：
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
/*
这里要用到事件源
*/
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}
这样，当鼠标在li上时，根据事件冒泡，由当前节点（当前li节点触发了ul的mouseover事件）自下而上触发事件，当节点对象是li时执行我们的操作。避免了dom遍历。
此外，和事先遍历dom为每个li绑定事件不同，事件委托的方式是将事件绑定在ul上，所以在运行时动态添加的li上仍有效果。
术语解释：
-
事件对象： 如上代码，当
onmousemove事件发生时，就会产生一个事件对象，就是程序中的event对象。 -
获取事件对象：
var e = event || window.event;IE下是window.event，标准下是event - 事件源：事件源，在事件中，当前操作的那个元素就是事件源。
-
获取事件源：IE：
window.event.srcElement，标准：event.target -
target.nodeName：找到元素的标签名
*笔记整理自博客园
