<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果 //好处 //1.提高性能 //2.新添加的元素，还会有之前的事件 //event对象： // 事件源：不管在那个事件中，只要你操作的那个元素就是事件源 //ie : window.event.srcElement // 标准下 ：event.target //nodeName : 找到当前元素的标签名 window.onload=function(){ var oBtn=document.getElementsByTagName("input")[0]; var oUl=document.getElementById("ul"); iNow=5; // oBtn.onclick=function(ev){ // var oEvent=ev || event; // if(oEvent.srcElement){ // alert(oEvent.srcElement.value); // }else{ // alert(oEvent.target.value); // } // } oBtn.onclick=function() { iNow++; var oLi=document.createElement("li"); oLi.innerHTML=iNow*11111111; oUl.appendChild(oLi); } oUl.onmouseover=function(ev) { var oEvent=ev || event; //alert(oEvent.srcElement.innerHTML)// IE CHROME //alert(oEvent.target.innerHTML)// FF var target=oEvent.srcElement || oEvent.target; if(target.nodeName.toLowerCase()=="li") { target.style.background="yellow"; } } oUl.onmouseout=function(ev) { var oEvent=ev || event; //alert(oEvent.srcElement.innerHTML)// IE CHROME //alert(oEvent.target.innerHTML)// FF var target=oEvent.srcElement || oEvent.target; if(target.nodeName.toLowerCase()=="li") { target.style.background=""; } } } </script> </head> <body> <input type="button" value="按钮"> <ul id="ul"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <li>55555555</li> </ul> </body> </html>