addEventListener("click",...) firing immediately

Question

I'm trying to create some appropriately-placed instructional tooltips that users click through to understand how the site interface works. Each tooltip has a "next" link that toggles the visibility of the previous and next tooltips by modifying the classes (and hence, css).

Here's some simplified code that is supposed to do this:

function displayTooltip(t){
  //...some code to determine the tooltip IDs "next" and "previous"
  document.getElementById(previous).className = "tooltip invisibleTooltip";
  document.getElementById(next).className = "tooltip";
}

document.getElementById("tooltip-link1").addEventListener("click", displayTooltip(2));

displayTooltip is called immediately (and correctly toggles the class) when I paste this code into the console (or on page load). If I replace displayTooltip with an alert(), it fires when I click, as anticipated. What am I doing wrong?

when you say document.getElementById("tooltip-link1").addEventListener("click", displayTooltip(2)); you are invoking the method there only and hence it is executing immediately — Vatsal, Feb 27 '16 at 08:06
Change `displayTooltip(2)` to `displayTooltip.bind(null, 2)`. For explanation see below answers. — Mr_Green, Feb 27 '16 at 08:14

score 68 · Accepted Answer · answered Feb 27 '16 at 08:05

68

When you are binding event you are calling the function document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

You need to pass reference to the function.

Change to below

document.getElementById("tooltip-link1").addEventListener("click", function(){
   displayTooltip(2)
});

answered Feb 27 '16 at 08:05

Jagdish Idhate

7,513
9
35
51

3

Thanks. Your explanation on the difference between calling and passing the reference made what was happening understandable (I thought addEventListener accepted references, not functions themseves). – Escher Feb 27 '16 at 08:17
4

Thanks. This is what I was looking for. No tutorial explains this. – Vikram Sharma Oct 12 '20 at 13:30
1

Thank you so much I have been looking all over the internet for this!!!! – Josh Bullough Mar 04 '22 at 07:27

score 28 · Answer 2 · answered Feb 27 '16 at 08:11

When you write functionName followed by (), it will call function. If you wish to assign function to a handler, you should do

document.getElementById("tooltip-link1").addEventListener("click", displayTooltip);

Now if you wish to pass parameter to this function, you can either wrap it inside a function like

document.getElementById("tooltip-link1")
  .addEventListener("click", function(){displayTooltip(2)});

Or you can use .bind()

document.getElementById("tooltip-link1")
  .addEventListener("click", displayTooltip.bind(this, 2));

score 1 · Answer 3 · answered Feb 27 '16 at 08:12

You need to call this method as a callback. Since you are calling it as displayTooltip(2) you are ultimately calling the function at that line.

What you need to do is to bind a callback rather than calling at that line. Something like

 .addEventListener('event', function()
     { displayTooltip(2) }

Hope this be of some help

Happy Learning

addEventListener("click",...) firing immediately

3 Answers3

Linked

Related