AddEventListener вызывает функцию без меня, даже прося ее

Итак, у нас есть страница:

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

И хотите добавить несколько событий click:

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

Работает как шарм! Однако, когда вы делаете второй аргумент внешней функцией:

function message_me(m_text){
    alert(m_text)
}

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

Он вызывает функцию немедленно. Как я могу остановить это? Так раздражает!

Здесь живое демо: http://jsfiddle.net/ey7pB/1/

Ответ 1

function message_me(m_text){
    alert(m_text)
} 

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

Здесь обновлен fiddle.

Ответ 2

Поскольку второй параметр ожидает ссылку на функцию, вам необходимо указать ее. С вашим проблемным кодом вы немедленно вызываете функцию и передаете ее результат (который не 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'));

ДЕМО: http://jsfiddle.net/tcCvw/

Ответ 3

или вы можете использовать .bind

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

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

проверьте документацию MDN о "замыканиях"

Ответ 4

Современное решение ES6 с использованием функций стрелок

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