您的位置:首页 > Web前端 > JavaScript

JavaScript 学习笔记— —事件委托

2015-04-06 22:05 381 查看
<!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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: