Question

我想将我的标记与行为分开，但我坚持如何在onclick事件之后将我创建的函数与文档中的所有链接相关联，而不将其直接包含在标记中。这是我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
    <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a>
</li>
<li>
    <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>
</li>
<li>
    <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>
</li>
<li>
    <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery">
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

这是我的脚本

function showPic(whichPic) {
"use strict";
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");

placeholder.setAttribute("src", source);
}

window.onload = function() {
"use strict";
var anchors = document.getElementsByTagName("a");

console.log(anchors);

for(var i = 0, count = anchors.length; i < count; i++) {
    //anchors[i].preventDefault;
   // anchors[i].onclick = showPic;
}

}

我尝试遍历链接并将功能分配给每个链接的onclick事件，但它没有工作。这样做的最佳方法是什么，以便行为与标记完全分开？

Answer 1

function showPic(e) {
    // e is the event, e.target is the current element
    "use strict";
    e.preventDefault();
    var source = e.target.getAttribute("href");
    var placeholder = document.getElementById("placeholder");

    placeholder.setAttribute("src", source);
}

window.onload = function() {
    "use strict";
    var anchors = document.getElementsByTagName("a");

    for(var i = 0, count = anchors.length; i < count; i++) {
        anchors[i].onclick = showPic;
        // Or you could use anchors[i].addEventListener('click',showPic);
    }
}

不要忘记删除HTML中的内容。

JS Fiddle Demo

旁注

Void使用addEventListener而非onclick提及。两者都是可以接受的，但请记住：

此代码：

element.onclick = func1;
element.onclick = func2;

会导致点击时调用func2，但不会func1。这是因为它会覆盖该精确元素上的任何先前的.onclick语句。

但是这段代码：

element.addEventListener('click',func1);
element.addEventListener('click',func2);

会导致func1和func2被执行，因为它们相加。

Answer 2

最佳方式

Array.prototype.forEach.call(document.getElementsByTagName("a"), function(el){
        el.addEventListener("click", function(event){
           event.preventDefault();
           showPic();
        });
});

在onclick事件之后为每个链接分配一个函数

2 个答案:

JS Fiddle Demo