<!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>
