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

Question

我正在尝试[在jsfiddle]中创建一个函数来将新创建的函数追加TextNode到<p>下面的HTML中:

    <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的] Code Wrap设置为'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/