IT技术 - addEventListener 调用该函数，我什至不要求它 - 吾爱随笔录

IT技术 javascript addeventlistener

2021-01-11 03:50:53

所以我们有一个页面：

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

4个回答

引用伊恩的回答：

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

function message_me(m_text){
    alert(m_text)
} 

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

这是一个更新的小提琴。

你能解释为什么你认为 bind 是更好的选择吗？

2021-03-14 03:50:53

我认为你应该更新你接受的答案，因为传递函数而不调用它，并且绑定 - 在这里可能是更好的选择。

2021-03-22 03:50:53

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

或者你可以使用 .bind

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

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

检查有关“关闭”的MDN 文档

+1 绑定应该是要走的路——不确定 4 年前是否可用，但绝对是今天的首选方式，而不是创建匿名函数

2021-03-25 03:50:53

绑定的好建议，绝对应该是公认的答案。OP能改吗？

2021-03-26 03:50:53

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

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

其它你可能感兴趣的问题