Javascript 如果有的话，为什么addEventListener会在事件发生前触发？

我在[jsfiddle]中进行实验，创建了一个函数，将新创建的TextNode附加到下面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“不引人注目”时，问题的症结就显露出来了

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

我的代码发生了两件奇怪的事情： 当[jsfiddle's]被设置为“no wrap-in-head”时，什么也不会发生

但是，当设置为“onLoad”、“onDomReady”或“no wrap-in body”时，函数会在单击和获取之前运行

---

有人能告诉我我遗漏了什么吗？

你问题的根源在于：

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);
}

---

首先，您使用addeventlistener是错误的。add event listener在第二个参数中需要函数引用，而不是函数调用

以下是函数参考：

var myfunctionreference = addTextNode;

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

var myfunctioncall = addTextNode();

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

您应该像这样绑定事件：

button.addEventListener("click", addTextNode);

其次，事件知道元素，也知道事件。应该创建函数调用以接受事件，而不是任意字符串。然后利用事件或这将允许你得到你的手上的文本寻找

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

    p1.appendChild(newtext);
}

---

我接受了你简洁的回答。感谢您的澄清。重复问题的答案建议：button.addEventListenerclick，函数{addTextNodebutton.innerHTML}.@alexkovelsky和？它们都能工作。@KevinB-我的评论表明可以使用参数调用处理程序。这是一个很大的区别。@alexkovelsky，不，你的例子中的处理程序是函数{}。然后调用另一个函数

button.addEventListener("click", addTextNode);

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

    p1.appendChild(newtext);
}