Javascript 将变量传递给addEventListener函数

我在试图弄清楚为什么这段代码不能运行时遇到了麻烦。我在控制台中没有收到任何错误

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

const remove=saClass=>{
document.getElementsByClassName（'site-alert'）[0].remove（）；
};
const sitealert=（{message='Default message'，dismissttext='Close'，className='site alert'}）=>{
呈现（`${message}${dismissttext}`）；
document.getElementById（'close-message'）。addEventListener（'click'，remove（className），false）；
};
导出常量init=（选项）=>sitealert（选项）；

当我将参数

remove（className）

添加到addEventListener时，代码根本不会运行，控制台中也没有错误

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

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

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

谢谢， 戴夫

像这样的表情

functionName(expression)

是对函数的调用。您需要的是另一个函数。您可以明确地这样做：

() => remove(className)

或使用

.bind（）

：

---

addEventListener

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

remove

是一个函数

remove（className）

是使用参数调用该函数的结果。由于函数没有

return

语句，因此结果是

undefined

如果要生成一个函数，该函数将调用带有参数的

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

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

const sitealert=（{message='Default message'，dismissttext='Close'，className='site alert'}）=>{
呈现（`${message}${dismissttext}`）；
document.getElementById（'close-message'）。addEventListener（'click'，remove（className），false）；
};
函数删除（yourVar）{
返回函数（e）{
//yourVar在这里可用
}
}

如果您有参数选项，则应使用：

.addEventListener('onclick', function() {remove(className)}, true);

---

为了指定它的a功能

这个问题已经被回答了至少一千次。可能是重复的

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

.addEventListener('onclick', function() {remove(className)}, true);