JavaScript 学习笔记— —事件委托 

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

 

posted @ 2015-04-06 22:05  eaysun  阅读(197)  评论(0)    收藏  举报