计算器应用：如何限制运算符间数字仅含一个小数点

一、限制算术运算符间的数字仅含一个小数点 #

这是计算器开发里很常见的需求，核心思路就是跟踪当前输入的数字段是否已经包含小数点，用一个状态变量来控制是否允许添加小数点就行。

具体实现逻辑： #

• 定义一个canAddDecimal变量，初始设为true，表示当前可以输入小数点
• 点击数字按钮时：
  • 如果是小数点，先检查canAddDecimal是否为true，同时处理空显示的情况（比如直接点小数点时自动补成0.）
  • 成功添加小数点后，把canAddDecimal改成false，避免重复添加
• 点击运算符按钮时：
  • 把canAddDecimal重置为true，因为接下来要输入新的数字，允许再次添加小数点
  • 顺便可以处理连续点击运算符的情况（比如把最后一个运算符替换成新的）

代码示例： #

const display = document.querySelector(".result");
let canAddDecimal = true;

// 用事件委托来处理，后面会讲为啥更高效
const calculatorContainer = document.querySelector(".calculator");

calculatorContainer.addEventListener("click", (e) => {
  const target = e.target;
  
  // 处理数字按钮点击
  if (target.classList.contains("number-button")) {
    const value = target.textContent;
    if (value === ".") {
      if (!canAddDecimal) return;
      // 空显示时直接点小数点，自动补0
      display.textContent = display.textContent === "" ? "0." : display.textContent + value;
      canAddDecimal = false;
    } else {
      display.textContent += value;
    }
  }
  
  // 处理运算符按钮点击
  else if (target.classList.contains("operator-button")) {
    const value = target.textContent;
    // 防止开头就加运算符
    if (display.textContent === "") return;
    // 替换连续的运算符（比如避免出现"5++3"这种情况）
    const lastChar = display.textContent.slice(-1);
    if (["+", "-", "*", "/"].includes(lastChar)) {
      display.textContent = display.textContent.slice(0, -1) + value;
    } else {
      display.textContent += value;
    }
    // 切换到新数字段，允许添加小数点
    canAddDecimal = true;
  }
});

二、事件委托 vs 循环添加事件监听器的内存效率 #

结论：事件委托的内存效率确实更高，尤其是按钮数量较多时，优势非常明显。

核心差异： #

• 循环添加监听器：每一个按钮都会生成一个独立的事件监听器实例，每个实例都会占用额外内存。如果你的计算器有十几个按钮，这些监听器的内存开销会慢慢累加。
• 事件委托：只需要在父容器上绑定一个监听器，利用DOM的事件冒泡机制来处理所有子按钮的点击。不管有多少个子按钮，都只需要这一个监听器，内存占用直接减少一大截。

额外加分项： #

事件委托还有个实用优势：动态添加的按钮不需要重新绑定监听器。比如后续通过JS生成了新的数字/运算符按钮，父容器的监听器会自动处理它们的点击；而循环添加的方式，新按钮必须手动再绑定一次监听器，非常麻烦。

当然，如果你的按钮数量极少（比如只有三四个），两种方式的内存差异几乎可以忽略，但事件委托仍然是更优雅的方案。

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