2 t542515190 T542515190 于 2014.10.27 13:47 提问

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>

2个回答

showbo
showbo   Ds   Rxr 2014.11.18 16:27
已采纳

switch (**target.id||target.parentNode.id**) {

ICE39
ICE39   2014.10.28 15:21

你最终捕捉到的是image对象,而不是li,自然没有target.id了,请仔细检查代码

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
event.target的认识
e.target的认识 最近在做特效的过程中遇到了获取目标事件源的情况,一般情况下我们获取目标事件源都是谁是调用者谁就是事件源,但是当有批量的DOM需要操作的时候,要判断哪一个dom是事件源就不是很明确了,使用e.target可以准确地获取事件源,并且在使用的过程中可以比较判断,从而实现我们的代码。 举个例子:当做一个拖拽的案例的时候,有多个事件源,但是想要知道鼠标点击的是不是我们
jquery event.target 事件委托
在实际项目中经常会遇到动态添加元素,然后再对添加的元素进行操作的需求 var that $('.add').on('click',function(){ $('.list').append('哈哈') }) $('.list').on('click','.item',function(e){ console.log(e.target.className) if(
Javascript里的EventTarget的规范及应用
"EventTarget is a DOM interface implemented by objects that can receive DOM events and have listeners for them." 一个EventTarget是一个可以接受DOM事件且能绑定事件监听器的对象.最常见的EventTarget就是DOM元素对象,另外,还有一些不是DOM元素的对象也能成为
JavaScript 事件委托详解
avaScript 事件委托详解 | 掘金技术征文 基本概念 事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素; 一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数; 举
获取自定义属性/event的触发事件对象和绑定事件对象
1.获取自定义属性 var testEle = document.getElementById("test")   testEle.setAttribute("key","value"); // 设置   testEle.attributes["key"].nodeValue; // 获得   2.event的触发事件对象和绑定事件对象 event.target返回触发事
js 导致事件委托触发事件失败的一个问题
本文描述了利用js事件委托机制或jQuery的on()方法绑定事件,代码写的没问题,然而又无法触发事件,导致事件触发失败的一个问题与原因,及其解决的方法:利用事件委托绑定事件时的父元素或祖先元素必须是存在的。
javascript event.srcElement与event.target的区别(待深入研究)
IE :    event 对象有  srcElement , 但没有 target 属性FireFox:    event 对象有  target ,但没有 srcElement  属性解决方法 :    eve =event.srcElement?event.srcElement:event.target;(个人认为类似于判断游览器)srcElement :         对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。target :     
JS里的事件委托
1. 什么是事件委托 2.实现事件委托
jquery笔记:事件对象 event.currentTarget,event.data,event.delegateTarget,event.relatedTarget.......
event.currentTarget 在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); event.data 当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。 $("a").each
如何根据event.target得到标签元素的名字
var localName=$(event.target)[0].localName; 当然可能不用jquery也可以得到,但是我没有测试!