事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果
好处：1.提高性能 2.新添加的元素还会有之前的事件
event对象：事件源：不管在哪个事件中，只要你操作的那个元素就是事件源
兼容问题：ie：window.event.srcElement 标准：event.target
nodeName:此方法用来找到当前元素的标签名 大写
例子：ul下面包含几个li 在鼠标移入li中触发事件 同时，点击add按钮之后添加的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的事件委托给父级ul上
完整代码如下：
<head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var oInput = document.getElementById('input1'); var iNow = 4; oInput.onclick = function(){ //add按钮点击时添加li功能 iNow++; var oLi = document.createElement('li'); oLi.innerHTML = 1111 *iNow; oUl.appendChild (oLi); }; oUl.onmouseover = function(ev){ var ev = ev || window.event; //为了兼容性，ie为window.event.srcElement,标准浏览器为event.target var target = ev.target || ev.srcElement; //判断nodeName。如果是li就执行，这样可以避免ul也执行事件。获取到的标签是大写的li。 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 = ''; } } }; </script> </head> <body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <input type="button" value="add" id="input1" /> </body>