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

score 39 · Accepted Answer

引用伊恩的回答：

由于第二个参数需要一个函数引用，因此您需要提供一个。使用有问题的代码，您会立即调用该函数并传递其结果（这是undefined......因为该函数所做的所有事情都是alert并且不返回任何内容）。在匿名函数中调用该函数（如您的第一个示例）或更改该函数以返回一个函数。

function message_me(m_text){
    alert(m_text)
} 

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

这是一个更新的小提琴。

score 26 · Accepted Answer

由于第二个参数需要一个函数引用，因此您需要提供一个。使用有问题的代码，您会立即调用该函数并传递其结果（这是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/

score 18 · Accepted Answer

或者你可以使用 .bind

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

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

检查MDN 文档关于“闭包”

score 14 · Accepted Answer

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

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

4 回答 4