javascript中使用事件委托无法获取到event.target

<!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");
                    //使用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, false);  
                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>
    <div id="wrapper">
        <div id="pic_wrapper">
            <img src="transition1.jpg">
            <img src="transition2.jpg">
            <img src="transition3.jpg">
            <img src="transition4.jpg">
        </div>
        <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>
    </div>
</body>
</html>

展开全部

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
斯洛文尼亚旅游 2014-11-18 00:27
关注
switch (**target.id||target.parentNode.id**) {

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报
编辑

预览
轻敲空格完成输入
显示为

卡片

标题

链接
评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

编辑

预览

报告相同问题？

关注问题

js事件委托，解决在父级上绑定事件，子级是复杂层级无法直接通过event.target获取到的问题
2023-10-30 08:23

九段刀客的博客【代码】js事件委托，解决在父级上绑定事件，子级是复杂层级无法直接通过event.target获取到的问题。
event.target的作用
2023-12-19 03:23

HWL5679的博客当你点击一个按钮或者在输入框中输入文本时，event.target就会指向那个按钮或输入框。
event.target与event.currentTarget之间的差异
2022-08-18 13:31

喂你吃口饭吧~的博客 event.target与event.currentTarget之间的差异
React之使用event.target来防止过度使用refs属性
2022-03-08 09:57

冰淇淋配马卡龙的博客通过onXxx属性指定事件处理函数(注意大小写) ...因为这里如果使用refs属性获取标签并运用显示的话都是对同一个input标签而言的，所以可以直接用event.target的方式，其中event是系统参数。相关代码： &.
event.target与event.currentTarget的区别
2023-01-10 02:47

前端攻城猿的博客 event.target与event.currentTarget的区别
Event.target与event.currentTarget
2022-05-31 06:11

有梦想的菜的博客 Event.target：指的是真正触发事件的元素节点 Event.currentTarget：指的是绑定了事件监听的元素
event.target与event.currentTarget的差异
2022-08-20 11:41

喂你吃口饭吧~的博客 event.target与event.currentTarget的差异
JavaScript中的事件委托与事件冒泡
2024-04-26 16:23

xiaban_的博客 JavaScript中的事件委托与事件冒泡，以及常用的event的属性，其中主要详细讲了event.target
【前端】详解JavaScript事件代理（事件委托）
2024-06-10 09:00

程序员洲洲的博客【前端】详解JavaScript事件代理（事件委托）
Event: target property 事件委托
2024-05-01 03:34

tina咕噜咕的博客事件目标属性（）可以用来实现...是一种在JavaScript中处理事件的技巧，其中父级元素处理其所有子级元素的事件，而不是为每个子级元素添加独立的事件监听器。这种方法在处理大量子元素的事件时可以提高性能和可维护性。
没有解决我的问题, 去提问

javascript中使用事件委托无法获取到event.target

2条回答 默认 最新

2条回答默认最新