Javascript “addEventListener” Event Fires on Page

Question

This question already has an answer here:

• addEventListener calls the function without me even asking it to 3 answers

When I run the following script, the event always fires on page load. I am not sure what I am doing wrong here, I create the element, find it in the DOM then attach a listener, but it always fires the event when the page loads and not when the element is clicked.

<script type="text/javascript" language="javascript">
    document.write("<div id=\"myDiv\">I am a div</div>");
    el = document.getElementById("myDiv");
    el.addEventListener("click", alert("clicktrack"), false);
</script>

Answer 1

How about:

<script type="text/javascript" language="javascript">
  document.write("<div id=\"myDiv\">I am a div</div>");
  el = document.getElementById("myDiv");
  el.addEventListener("click", function() { alert("clicktrack"); }, false);
</script>

Answer 2

el.addEventListener("click", alert("clicktrack"), false);

When this line is executed, the alert will be called and return undefined. To pass the alert code you need to wrap it in a function.

el.addEventListener("click", function() { alert("clicktrack"); }, false);