V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Departures
V2EX  ›  JavaScript

[求助] 关于事件代理的问题

  •  
  •   Departures · 2018-04-14 18:34:41 +08:00 · 3241 次点击
    这是一个创建于 2196 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <div id="content"> 
    
    	<ul id="movielist">                                                                
            <li><a href="a.jpg" onclick="f(this);return false">a</a></li>
            
            <li><a href="b.jpg" onclick="f(this);return false">b</a></li>                        
            <li><a href="c.jpg" onclick="f(this);return false">c</a></li>                        
            <li><a href="d.jpg" onclick="f(this);return false">d</a></li>                        
            <li><a href="e.jpg" onclick="f(this);return false">e</a></li>                        
        </ul>                                                                              
        <img src="placeholder.jpg" id="placeholder" alt="show picture here">
    </div>
    

    就在上面这个 html 里,我想通过点击标签在当前页面显示图片 思路是替换的 src 属性;

    <script>
    function f(picture){
    
    	var source=picture.getAttribute("href");                      
    	var placeholder=document.getElementById("placeholder"); 
    	placeholder.setAttribute("src",source);                 
    }
    </script>
    

    现在我想通过事件代理来实现这个功能,但是一直代理不到

      上去,我是这样写的

      var ul=document.getElementById("movielist");                    
       var li=ul.childNodes;                                           
       for(var i=0;i<li.length;i++){ 
       
           var a=li[i].getElementsByTagName("a");                      
           ul.addEventListener("click",function(){                     
               let source=a.getAttribute("href");                      
               var placeholder=document.getElementById("placeholder"); 
               placeholder.setAttribute("src",source);                 
               return false;                                           
           },false)                                                    
       }                                        
      

      请问我应该怎么改?谢谢

    8 条回复    2018-04-16 13:22:28 +08:00
    rabbbit
        1
    rabbbit  
       2018-04-14 19:29:21 +08:00   ❤️ 1
    var aArr = document.querySelectorAll("#movielist li a");
    for(var i = 0;i < aArr.length;i++){
    aArr[i].addEventListener("click", function(eve){
    placeholder.setAttribute("src",this.href);
    eve.preventDefault();
    });
    }
    emric
        2
    emric  
       2018-04-14 19:54:06 +08:00
    代理的方法错了。楼主应该是后端吧,jQeury 还是很好用的。
    https://gist.github.com/17/7930e51a16c4139be010408861023175
    rabbbit
        3
    rabbbit  
       2018-04-14 19:58:03 +08:00
    唔,一楼那个是错的,没看着事件代理
    var movielist = document.querySelector("#movielist");
    movielist.addEventListener("click", function(eve){
    if (eve.target.nodeName === "A") {
    placeholder.src = eve.target.href;
    eve.preventDefault();
    }
    });
    mikac
        4
    mikac  
       2018-04-15 12:05:35 +08:00
    弱弱地问一句: 什么是事件代理 :(
    enginex
        5
    enginex  
       2018-04-15 22:15:37 +08:00
    个人感觉使用 data-属性来添加自定义数据,语义上比 herf 要好,href 可以给"javascript:void(0)"
    azh7138m
        6
    azh7138m  
       2018-04-16 08:57:26 +08:00 via Android   ❤️ 1
    @mikac 事件处理绑在爹上,大概就是这样了
    mikac
        7
    mikac  
       2018-04-16 10:54:10 +08:00
    @azh7138m 原来是这样子的,感谢解惑
    Departures
        8
    Departures  
    OP
       2018-04-16 13:22:28 +08:00
    @rabbbit 请问 placeholder 没有申明为什么也可以直接用啊?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1077 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:46 · PVG 06:46 · LAX 15:46 · JFK 18:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.