55

So we have a page:

<span id='container'>
    <a href='#' id='first'>First Link</a>
    <a href='#' id='second'>Second Link</a>
</span>

And want to add some click events:

first.addEventListener('click', function(){alert('sup!');})

Works like a charm! However, when you make the second argument an external function:

function message_me(m_text){
    alert(m_text)
}

second.addEventListener('click', message_me('shazam'))

It calls the function immediately. How can I stop this? So annoying!

Here's a live demo: http://jsfiddle.net/ey7pB/1/

4
  • 7
    Since the second parameter expects a function reference, you need to provide one. With your problematic code, you're immediately calling the function and passing its result (which is undefined). Either call the function in an anonymous function (like your first example) or alter the function to return a function (probably not ideal).
    – Ian
    Commented Apr 30, 2013 at 23:17
  • 2
    Why is this not ideal? It seems against D.R.Y. to copypasta my function in the 4 or so addEventListeners that im setting, no? Commented Apr 30, 2013 at 23:20
  • Another option is to store the required message as an attribute on the element, then bind the function as second.addEventListener('click', message_me) and have it retrieve the message from the attribute rather than from a parameter.
    – nnnnnn
    Commented Apr 30, 2013 at 23:23
  • 2
    Possible duplicate of How to pass parameter to function using in addEventListener? Commented Jun 20, 2016 at 3:46

5 Answers 5

47

Quoting Ian's answer:

Since the second parameter expects a function reference, you need to provide one. With your problematic code, you're immediately calling the function and passing its result (which is undefined...because all the function does is alert and doesn't return anything). Either call the function in an anonymous function (like your first example) or alter the function to return a function.

function message_me(m_text){
    alert(m_text)
} 

second.addEventListener('click', 
    function() {
        message_me('shazam');
    }
);

Here's an updated fiddle.

3
  • I think you should update your accepted answer because passing the function without calling it, and bind - is probably a better choice here.
    – JackDev
    Commented Nov 2, 2016 at 14:53
  • 4
    Can you explain why you think bind is a better choice?
    – clav
    Commented Nov 2, 2016 at 16:07
  • @clav thanks I have been looking for this since 2-3 hours Commented Dec 8, 2022 at 6:47
28

Since the second parameter expects a function reference, you need to provide one. With your problematic code, you're immediately calling the function and passing its result (which is undefined...because all the function does is alert and doesn't return anything). Either call the function in an anonymous function (like your first example) or alter the function to return a function.

You can do this:

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', function () {
    message_me('shazam')
});

or this:

function message_me(m_text){
    return function () {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

DEMO: http://jsfiddle.net/tcCvw/

21

or you can use .bind

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', message_me.bind(this, 'shazam'));

check MDN Documentation about 'closures'

4
  • 2
    +1 binding should be the way to go — not sure if that was available 4 years ago, but is definitely the preferred way to today, as opposed to creating an anonymous function
    – vol7ron
    Commented Mar 7, 2017 at 0:40
  • 1
    Nice suggestion for the bind, definitely should be the accepted answer. Can OP change? Commented May 31, 2018 at 10:50
  • 1
    @vol7ron "as opposed to creating an anonymous function" .bind() still creates a new function. I don't see why it would be preferable. Moreover, it will always set the this value, which means that if the handler expects it to be the element, then .bind() will break that. It's definitely no silver bullet.
    – VLAZ
    Commented Apr 13, 2022 at 11:27
  • 2
    @VLAZ you're bringing me out of retirement ;) There are a few things here. (1) at the time of this comment arrow functions ()=>{...} and ES6 was still relatively new and also discouraged because IE had not supported it. (2) the anonysmous function was literally the longer function(){...} syntax, which was less readable. (3) While it may be slower to construct the underlying function, calls to the bind() function are significantly faster (1.5-2X), which may matter in a loop. I acknowledge your point about this being forcibly set :) The beatufiul thing about JS is options.
    – vol7ron
    Commented Apr 21, 2022 at 23:23
18

Modern ES6 solution using arrow functions

second.addEventListener('click', () => message_me('shazam'))
3

Year 2022

I know the following possibilities:

option 1 (anonymous function)

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', function () {
    message_me('shazam')
});

option 2 (callback fn calls a annoymous fn)

function message_me(m_text){
    return function () {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

option 3 (bind())

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', message_me.bind(this,'shazam'));

option 4 (arrow fn)

function message_me(m_text){
    alert(m_text);
}

second.addEventListener('click', () => {
    message_me('shazam')
});

I personally like to use the (option 4) arrow function because you get the context included. Another nice solution is the bind (option 3). What bothers me a bit about this variant is that you have to explicitly include the context with this. That can easily be forgotten. Option 1 is fine and this may have been the standard way in the past. To option 2 I can only say: it works but for my taste it looks awkward.

But basically you have to take what you find most understandable from the syntax. Because in the end you have to remember so much, then make your life easier and take what you can remember best. In my case that is option 4 and option 3 then option 1 and option 2 is not an alternative for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.