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

Question

我想将我的标记与行为分开，但我坚持如何在 onclick 事件后将我创建的函数关联到文档中的所有 link，而不是直接将其包含在标记中。这是我的 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;
}

}

我尝试遍历 link 并将函数分配给每个 link 的 onclick 事件，但没有成功。使行为与标记完全分离的最佳方法是什么？

Answer 1

最佳方式

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

Answer 2

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 都被执行，因为它们相加。

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

Assigning a function to each link after the onclick event

javascript

events

JS Fiddle Demo