jQuery记录编辑场景：处理唯一事件用off还是one更高效？

问题背景 #

在Web应用的记录编辑流程中，点击保存按钮时guardarEditContrato()函数会被多次执行，不符合“每次编辑仅执行一次”的预期，本质是事件重复绑定导致的触发异常。当前采用先解绑再重新绑定的方案，现需对比该方案与jQuery one方法的效率差异。

当前使用的代码示例：

$(document).off("click", "#btnGuardarEditContrato").on("click", "#btnGuardarEditContrato", function () {
    guardarEditContrato(contrato_id);
});

两种方法的原理与效率分析 #

1. off("click", selector).on("click", selector, handler) #

• 原理：每次执行时，先从委托元素（此处为document）移除匹配指定选择器的点击事件处理器，再重新绑定新的处理器。
• 效率开销：
  • 每次调用都要遍历事件缓存、查找并移除对应处理器，再执行新绑定，存在重复的事件查找与操作成本。
  • 若选择器或事件类型匹配不准确，可能误删其他无关的委托事件，存在隐性风险。
• 适用场景：需要动态更新事件处理器逻辑（比如每次编辑的contrato_id不同，必须重新绑定带参数的处理器）的场景。

2. one("click", selector, handler) #

• 原理：绑定的事件处理器仅触发一次，触发后自动从委托元素上解绑，无需手动调用off。
• 效率开销：
  • 内部封装了“触发后自动解绑”逻辑，避免了手动调用off的额外操作，单次触发场景下比off+on少一次解绑步骤，效率略高。
  • 多次绑定（比如每次打开编辑弹窗都绑定一次）时，单次绑定开销与off+on相近，但无需手动处理解绑，代码更简洁，也不会出现误删事件的风险。
• 适用场景：单次触发需求，或每次编辑流程仅需触发一次保存、且每次编辑都需要重新绑定的场景。

更优解决方案：从根源避免重复绑定 #

最彻底解决多次触发问题且性能最优的方式，是只绑定一次事件，通过动态更新数据而非重复绑定来适配不同编辑场景：

1. 将contrato_id存储在按钮的data属性中：

<button id="btnGuardarEditContrato" data-contrato-id="">保存</button>

2. 页面初始化时仅绑定一次事件处理器，触发时读取最新的contrato_id：

// 页面加载完成后绑定一次即可
$(document).on("click", "#btnGuardarEditContrato", function () {
    const contratoId = $(this).data("contrato-id");
    guardarEditContrato(contratoId);
});

3. 每次打开编辑弹窗时，仅更新按钮的data属性：

// 打开编辑弹窗时执行
$("#btnGuardarEditContrato").data("contrato-id", 当前编辑的contrato_id);

这种方式完全避免了重复绑定事件的开销，从根源上杜绝了多次触发的问题。

结论 #

• 单纯对比off+on与one：one在单次触发场景下效率略高，多次绑定场景下两者效率相近，但one代码更简洁安全。
• 优先推荐单次绑定+动态更新数据的方案，既解决了多次触发问题，又能获得最佳性能。

内容的提问来源于stack exchange，提问作者Jose Fabrizio Castillo