addEventListener 调用该函数，我什至没有要求它答案

【问题标题】：addEventListener calls the function without me even asking it toaddEventListener 调用该函数，我什至没有要求它
【发布时间】：2021-12-21 17:22:45
【问题描述】：

所以我们有一个页面：

<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'))

它立即调用该函数。我怎样才能阻止这个？好烦！

【问题讨论】：

因为第二个参数需要一个函数reference，所以你需要提供一个。使用有问题的代码，您会立即调用该函数并传递其结果（即 undefined）。在匿名函数中调用该函数（如您的第一个示例）或将函数更改为 return 一个函数（可能不理想）。
为什么这不理想？似乎反对 D.R.Y.在我设置的 4 个左右 addEventListeners 中复制我的函数，不是吗？
另一种选择是将所需消息作为属性存储在元素上，然后将函数绑定为second.addEventListener('click', message_me) 并让它从属性而不是参数中检索消息。
How to pass parameter to function using in addEventListener?的可能重复

【解决方案1】：

引用伊恩的answer：

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

function message_me(m_text){
    alert(m_text)
} 

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

这是更新后的fiddle。

【讨论】：

【解决方案2】：

由于第二个参数需要一个函数reference，因此您需要提供一个。使用有问题的代码，您将立即调用该函数并传递其 result（即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 Documentation 关于“关闭”

【讨论】：

【解决方案4】：

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

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

【讨论】：