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

当我向addEventListener添加参数remove(className)时，代码根本不会运行，我在控制台中没有错误。

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

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

我应该注意到我正在使用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
    }
}

Answer 2

像

这样的表达式

functionName(expression)

是该功能的调用。你想要的是另一个功能。你可以明确地做到这一点：

() => remove(className)

或.bind()：

remove.bind(null, className)

Answer 3

addEventListener的第二个参数需要是一个函数。

remove是一个功能。

remove(className)是使用参数调用该函数的结果。由于该函数没有return语句，因此结果为undefined。

如果要生成一个将带有参数调用remove的函数，请使用bind。

remove.bind(null, className)

Answer 4

如果你有参数的功能，你应该使用：

以指定其功能

将变量传递给addEventListener函数

4 个答案: