AddEventListener calls a function without me even asking for it

Question

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

It 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!

+12

LittleBobbyTables Apr 30 '13 at 23:12

4 answers

, . ( undefined..., , - alert ). ( ), , .

:

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

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

:

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

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

+11

Ian 30 . '13 23:26

or you can use .bind

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

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

check MDN documentation for "faults"

+7

Sehyun kim Jun 19 '16 at 18:42

Modern ES6 solution using arrow functions

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

0

clav · Accepted Answer · 2013-04-30T23:14:08+0000

function message_me(m_text){
    alert(m_text)
} 

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

Here's the updated fiddle .