addEventListener在没有我甚至要求的情况下调用该函数

Question

所以我们有一个页面:

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

并想要添加一些点击事件:

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/

Answer 1

function message_me(m_text){
    alert(m_text)
} 

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

这是一个更新的小提琴.

Answer 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/

Answer 3

使用箭头函数的现代 ES6 解决方案

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

Answer 4

或者你可以使用.bind

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

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

查看 关于'闭包'的MDN文档