Why does addEventListener fire before the event if at all? [duplicate]

Answer 1

The root of your problem is here:

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

You're executing the function rather than passing it to the event listener. Instead, pass the function by reference, then get the innerHTML inside the function.

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

First, your usage of Add Event listener is wrong. add event listener is expecting a function reference in the second parameter not a function call.

The following is a function reference:

var myfunctionreference = addTextNode;

This is a function call and will execute the function

var myfunctioncall = addTextNode();

In your code you are actually calling the function to use as the event handler instead of referencing it. Here is some Reference for .addEventListener()

You should be binding the event like this:

button.addEventListener("click", addTextNode);

Second, the event knows the element and knows the event. Your function call should be created to accept the event and not an arbitrary string. Then utilizing the event or "this" will allow you to get your hands on the text your looking for.

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

    p1.appendChild(newtext);
}