javascript - 将变量传递给 addEventListener 函数

Question

我很难弄清楚为什么这段代码无法运行。我在控制台中完全没有错误。

const remove = saClass => {
  document.getElementsByClassName('site-alert')[0].remove();
};

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => {
  render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`);
  document.getElementById('close-message').addEventListener('click', remove(className), false);
};

export const init = (options) => sitealert(options);

当我将参数 remove(className) 添加到 addEventListener 时，代码根本不运行，并且我在控制台中没有收到任何错误。

如果我删除参数，一切正常。

我是否错误地传递了一个变量？

我应该注意，我正在使用 babel 将代码转换为 UMD 格式。

谢谢，戴夫

Answer 1

你可以使用闭包来传入变量，然后返回实际的回调:

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => {
  render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`);
  document.getElementById('close-message').addEventListener('click', remove(className), false);
};

function remove(yourVar) {
    return function (e) {
        //yourVar is available here
    }
}