如何正确为鼠标事件绑定函数以实现按钮显隐切换-html教程-PHP中文网

如何正确为鼠标事件绑定函数以实现按钮显隐切换

本文详解 JavaScript 中 addEventListener 常见错误：误将函数调用（带括号）当作函数引用传入，导致事件未触发；通过修正回调传递方式，实现多语言问候按钮的点击显隐切换效果。

本文详解 javascript 中 `addeventlistener` 常见错误：误将函数调用（带括号）当作函数引用传入，导致事件未触发；通过修正回调传递方式，实现多语言问候按钮的显隐切换效果。

在 Web 开发中，一个看似微小的语法细节——函数是否加括号——往往决定事件能否正常响应。你提供的代码中，问题核心在于这一行：

hello.addEventListener('click', disappear(hello));

这里 disappear(hello) 立即执行了函数，并将返回值（undefined，因原函数无返回值）作为事件处理器传入，而非等待点击时再执行。结果是：页面加载瞬间所有按钮就被隐藏/显示，而后续点击毫无反应。

✅ 正确做法是：向 addEventListener 传递一个函数引用（即不带括号的函数名），或一个未执行的函数表达式（如箭头函数）。以下是两种推荐写法：

✅ 方案一：使用箭头函数包装（清晰直观）

hello.addEventListener('click', () => disappear(hello));
ciao.addEventListener('click', () => appear(ciao));
ciao.addEventListener('click', () => disappear(ciao));
// ……其余同理

✅ 方案二：改造 `appear/disappear` 为返回函数的工厂函数（更可复用）

function disappear(variable) {
  return () => variable.style.display = 'none';
}

function appear(variable) {
  return () => variable.style.display = 'block';
}

// 现在可直接传入返回的函数
hello.addEventListener('click', disappear(hello));
ciao.addEventListener('click', appear(ciao));
ciao.addEventListener('click', disappear(ciao));
hola.addEventListener('click', appear(hola));
// ……

? 提示：若希望点击一个按钮时「仅显示它自身、隐藏其他」，可进一步封装逻辑：
function showOnly(target, ...others) {
  appear(target);
  others.forEach(el => disappear(el));
}
hello.addEventListener('click', () => showOnly(hello, ciao, hola, bonjour));