为什么addEventListener会在事件发生之前触发

Question

我正在试验[in jsfiddle] w/一个创建的函数，用于将新创建的TextNode附加到下面HTML中的<p>:

    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
    <hr />
    <p id="p1">First line of paragraph.</p>

这是我的javascript以及:

    function addTextNode(text) {
        var newtext = document.createTextNode(text),
            p1 = document.getElementById("p1");
        p1.appendChild(newtext);
    }

这很好。然而，当我试图通过从标记中删除行为来使我的javascript"不引人注目"时，问题就暴露出来了…

    <button>YES!</button>
    <button>NO!</button>
    <button>WE CAN!</button>
    <hr />
    <p id="p1">First line of paragraph.</p>

然后利用循环将addEventListener附加到每个<button>元素上，然后使用子TextNode调用addTextNode:

    function addTextNode(text) {
        var newtext = document.createTextNode(text),
            p1 = document.getElementById("p1");
        p1.appendChild(newtext);
    }
    var btns = document.getElementsByTagName("button");
    for(i = 0; i < btns.length; i++){
        var button = btns[i]; 
        button.addEventListener("click", addTextNode(button.innerHTML));
    }

我的代码发生了两件奇怪的事情:
当[jsfiddle的]代码自动换行设置为'no Wrap - in head'时，什么也不会发生。

然而，当Code Wrap设置为'onLoad'， 'onDomReady'或'no Wrap - in body'时，该函数在点击之前运行，我得到这个

谁能告诉我我错过了什么?

Answer 1

问题的根源在这里:

button.addEventListener("click", addTextNode(button.innerHTML))

您正在执行函数而不是将其传递给事件侦听器。相反，通过引用传递函数，然后获取函数内部的innerHTML。

function addTextNode() {
    var newtext = document.createTextNode(this.innerHTML),
        p1 = document.getElementById("p1");
    p1.appendChild(newtext);
}
var btns = document.getElementsByTagName("button");
for(i = 0; i < btns.length; i++){
    var button = btns[i]; 
    button.addEventListener("click", addTextNode);
}

http://jsfiddle.net/bn85J/

Answer 2

首先，您对Add Event listener的使用是错误的。Add事件监听器在第二个参数中期望函数引用，而不是函数调用。

下面是一个函数引用:

var myfunctionreference = addTextNode;

这是一个函数调用，将执行函数

var myfunctioncall = addTextNode();

在你的代码中，你实际上是调用函数使用作为事件处理程序，而不是引用它。这里是一些参考。addeventlistener ()

你应该像这样绑定事件:

button.addEventListener("click", addTextNode);

第二，事件知道元素，也知道事件。应该创建函数调用来接受事件，而不是任意字符串。然后使用事件或"this"可以让你找到你想要的文本。

function addTextNode(evt) {
    var newtext = document.createTextNode(this.innerHTML),
        p1 = document.getElementById("p1");
    p1.appendChild(newtext);
}