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

2018-04-14 18:34:41 +08:00
 Departures
<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)                                                    
     }                                        
    

    请问我应该怎么改?谢谢

3412 次点击
所在节点    JavaScript
8 条回复
rabbbit
2018-04-14 19:29:21 +08:00
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
2018-04-14 19:54:06 +08:00
代理的方法错了。楼主应该是后端吧,jQeury 还是很好用的。
https://gist.github.com/17/7930e51a16c4139be010408861023175
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
2018-04-15 12:05:35 +08:00
弱弱地问一句: 什么是事件代理 :(
enginex
2018-04-15 22:15:37 +08:00
个人感觉使用 data-属性来添加自定义数据,语义上比 herf 要好,href 可以给"javascript:void(0)"
azh7138m
2018-04-16 08:57:26 +08:00
@mikac 事件处理绑在爹上,大概就是这样了
mikac
2018-04-16 10:54:10 +08:00
@azh7138m 原来是这样子的,感谢解惑
Departures
2018-04-16 13:22:28 +08:00
@rabbbit 请问 placeholder 没有申明为什么也可以直接用啊?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/446848

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX