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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2983 days ago, the information mentioned may be changed or developed.

<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 replies • 2018-04-16 13:22:28 +08:00

rabbbit

Apr 14, 2018

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

Apr 14, 2018

代理的方法错了。楼主应该是后端吧，jQeury 还是很好用的。
https://gist.github.com/17/7930e51a16c4139be010408861023175

rabbbit

Apr 14, 2018

唔,一楼那个是错的,没看着事件代理
var movielist = document.querySelector("#movielist");
movielist.addEventListener("click", function(eve){
if (eve.target.nodeName === "A") {
placeholder.src = eve.target.href;
eve.preventDefault();
}
});