javascript中使用事件委托时无法获取到event.target-PHP中文网问答

<!doctype html>
<html>
    <head>
        <title>image's transition</title>
        <script type="text/javascript">
        window.onload = function(){
            var pic_wrapper = document.getElementById("pic_wrapper");
            var ul = document.getElementsByTagName("ul")[0];
            var lis= document.getElementsByTagName("li");
            var imgs = pic_wrapper.getElementsByTagName("img");
            var img1 = imgs[0];
            var img2 = imgs[1];
            //使用for循环绑定事件处理函数，通过测试
            // for (var i = 0; i < lis.length; i++) {
            //  var img = imgs[i];
            //  var li = lis[i];
            //  setOpacity(li,img);

            //  function setOpacity(li1,img1){
            //      li1.onmouseover = function(){
            //          setAllOpacity();
            //          img1.style.opacity = "1";
            //      };
            //  }
            // };
            function setAllOpacity(){
                for(var i = 0; i < imgs.length; i++){
                    imgs[i].style.opacity = "0";
                }
            }
            //使用事件委托方式，但存在问题
            ul.onmouseover = function(event){
                event = event || window.event;
                var target = event.target || event.srcElement;
                switch(target.id){//问题在于target.id，通过正常交互无法获取target.id
                    case "li1":
                        setAllOpacity();
                        imgs[0].style.opacity = "1";alert("li1");
                        break;
                    case "li2":
                        setAllOpacity();
                        imgs[1].style.opacity = "1";alert("li2");
                        break;
                    case "li3":
                        setAllOpacity();
                        imgs[2].style.opacity = "1";
                        break;
                    case "li4":
                        setAllOpacity();
                        imgs[3].style.opacity = "1";
                        break;
                }
            };

            function fire(elem, type){  
                var evt;  
                if(document.createEventObject){  
                    elem.fireEvent('on'+type);  
                }else{ 
                    evt = document.createEvent('MouseEvents');  
                    evt.initEvent(type, true, true);  
                    elem.dispatchEvent(evt);  
                }  
            }  
            fire(lis[0],"mouseover");//手动触发事件可以获取得到target
        };
        </script>
        <style type="text/css">
        *{
            padding: 0;
            border: 0;
            margin: 0;
        }
        #wrapper{
            width: 800px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        #pic_wrapper{
            position: absolute;
        }
        #pic_wrapper img{
            width: 800px;
            height: 600px;
            position: absolute;
            transition: opacity 0.5s ease-in;
            opacity: 0;
        }
        .num{
            position: absolute;
            bottom: 50px;
            left: 390px;
        }
        li{
            display: inline;
            cursor: pointer;
        }
        </style>

    </head>
    <body>
        <p id="wrapper">
            <p id="pic_wrapper">
                <img src="transition1.jpg">
                <img src="transition2.jpg">
                <img src="transition3.jpg">
                <img src="transition4.jpg">
            </p>
            <ul class="num">
                <li id="li1"><img src="num.jpg"></li>
                <li id="li2"><img src="num.jpg"></li>
                <li id="li3"><img src="num.jpg"></li>
                <li id="li4"><img src="num.jpg"></li>
            </ul>
        </p>
    </body>
</html>