根据输入框值的有无显示/隐藏元素的优化实现

首先，input事件本身就是最合适的选择——它能覆盖键盘输入、粘贴、剪切、拖拽输入等所有输入框内容变化的场景，不需要更换其他内置事件。要解决重复添加类的问题，同时减少资源消耗，只需要做两个关键优化：

优化点1：缓存DOM元素 #

不要每次事件触发都调用document.getElementsByClassName查询DOM，DOM查询属于性能开销较高的操作，提前获取并缓存元素能大幅减少资源消耗：

const queryInput = document.querySelector(".query");
const submitBtn = document.querySelector(".submit");

（用querySelector比getElementsByClassName更简洁，直接返回匹配的单个元素）

优化点2：切换类而非重复添加 #

空值时给按钮添加hidden类的同时，必须移除visible类；非空时添加visible类的同时移除hidden类，这样既避免同一个类被重复添加，也能保证元素状态唯一：

queryInput.addEventListener('input', () => {
  const isEmpty = queryInput.value.trim() === ""; // 可选：用trim()过滤纯空格的情况
  if (isEmpty) {
    submitBtn.classList.add("hidden");
    submitBtn.classList.remove("visible");
    console.log("empty");
  } else {
    submitBtn.classList.add("visible");
    submitBtn.classList.remove("hidden");
    console.log("not empty");
  }
});

如果想让代码更简洁，还可以用classList.toggle的第二个参数（控制类的添加/移除）：

queryInput.addEventListener('input', () => {
  const isEmpty = queryInput.value.trim() === "";
  submitBtn.classList.toggle("hidden", isEmpty);
  submitBtn.classList.toggle("visible", !isEmpty);
  console.log(isEmpty ? "empty" : "not empty");
});

这样每次事件触发只会修改必要的类，不会重复添加冗余样式，同时缓存元素减少了DOM查询的开销，资源消耗降到最低。

内容的提问来源于stack exchange，提问作者tony