1. 快速概览与核心概念
1.1 on() 的基本作用
在前端开发中，jQuery 的 on() 是用于给一个或多个元素绑定事件处理函数的核心方法。它支持直接绑定和事件委托两种模式，能够处理动态变化的 DOM。通过 事件委托，你可以把事件绑定到父级元素上，从而让后续动态添加的子元素也能响应事件。
在使用 on() 时，关键点包括事件类型、事件目标、以及可选的选择器参数。对初学者而言，直接绑定和委托绑定的差异是判断是否需要 事件冒泡与委托。正确使用可以避免重复绑定并提升性能。
1.2 off() 的基本作用
off() 是用来移除之前通过 on() 绑定的事件处理函数的方法。它可以按事件类型、命名空间、选择器和目标元素来筛选要移除的处理函数，帮助你解决重复绑定和内存泄漏的问题。
结合命名空间，off() 还能实现更精准的解绑，而不会误伤其他绑定。理解 off() 的返回值和链式调用的能力，有助于在复杂场景中保持清晰的事件管理。
2. 防止重复绑定的核心策略
2.1 先解绑再绑定（off() + on()）
一种常见且可靠的做法是，在重新绑定事件前先执行 off()，确保之前的处理函数被移除，再执行 on()。这在页面重复渲染或动态逻辑切换时尤其有用。
实现要点包括指定相同的事件类型与命名空间，避免影响其他绑定。通过命名空间还能同时解绑同一组事件，保持代码整洁。下面给出一个典型示例。
// 绑定前先解绑，确保无重复
$(document).off('click.myHandler', '.btn-action').on('click.myHandler', '.btn-action', function(e) {// 处理逻辑console.log('按钮被点击');
});2.2 使用 one() 实现一次性绑定
one() 与 on() 的区别在于事件处理函数只会执行一次，随后就会自动解绑。这对某些初始化场景或仅需要首次交互的情况非常合适，能从根本上避免重复绑定。
需要注意，one() 不适用于需要持续监听的交互，若后续还需绑定，请结合 off() 或再次调用 on()。
// 绑定仅执行一次
$(document).one('click', '.setup-btn', function(e) {console.log('首次点击，执行初始化');// 后续的绑定如果需要，需再次显式绑定
});2.3 使用命名空间管理绑定
命名空间提供了一种高效的分组解绑方式。通过给事件绑定一个命名空间，如 .on('click.myApp')，你可以只解绑属于该命名空间的事件，而不影响同类型的其他绑定。
结合 off() 的选择性解绑，可以实现“先解绑同命名空间的事件，然后重新绑定”或“仅解绑某个命名空间”的策略，降低误伤风险与代码耦合。
// 给事件绑定命名空间
$(document).on('click.myApp', '.item', function() {// 处理逻辑
});// 仅解绑该命名空间中的事件
$(document).off('.myApp');3. 事件委托中的 on() 使用
3.1 事件委托的基本原理
事件委托通过将事件绑定到父元素或更高的祖先节点，利用事件 bubbling 机制将事件传递给匹配选择器的目标元素。这种模式对 动态添加的元素 提供稳定的事件响应能力，避免逐个在新元素上绑定事件。
在实际应用中，合理选择委托的层级与选择器，是避免性能下降和避免重复绑定的关键。
// 事件委托示例：绑定到 #list 容器
$('#list').on('click', '.list-item', function() {console.log('点击了列表项');
});3.2 通过命名空间和委托结合防重复
将命名空间与事件委托结合，可以实现对动态元素的稳定绑定，同时便于后续的解绑操作。命名空间让你只移除特定绑定，而不影响其他事件。
下面展示一个常用的组合策略：先解绑同命名空间的事件，再重新绑定携带委托的事件。
$(document).off('click.myApp', '#list .list-item').on('click.myApp', '#list .list-item', function() {console.log('委托绑定，且可控解绑');
});4. 常见错误与最佳实践
4.1 误用 off() 导致事件丢失
一个常见错误是错误地移除了错误的事件或作用域，导致实际需要的事件不再响应。务必确保 off() 的参数与目标绑定的 on() 一致，特别是事件类型、选择器和命名空间。
为避免混乱，推荐在绑定时使用清晰的命名空间，并把绑定逻辑集中到一个位置，便于统一的解绑策略。
// 错误示例：误删了其他事件
$(document).off('click', '.button'); // 这会移除所有不带命名空间的 click 绑定
4.2 避免全局绑定带来的性能问题
过多的全局事件绑定会影响页面性能，尤其是在包含大量元素的动态列表中。优先考虑事件委托和命名空间化管理。
此外，结合浏览器性能工具，监控事件触发频率和内存占用，及时清理不再需要的绑定。
5. 实战：混合示例
5.1 绑定按钮点击，动态生成的元素
场景：动态生成的按钮需要响应点击事件，同时防止重复绑定导致的重复执行。使用委托绑定并配合命名空间管理，保证初次绑定后不会在后续重新绑定。
以下示例展示了一个常见解决方案：先统一解绑同命名空间的事件，再进行委托绑定。
// 动态添加按钮
$('#controls').append('');// 委托绑定+命名空间，防止重复绑定
$('#controls').off('click.op').on('click.op', '.op', function() {console.log('执行操作，防重复绑定');
});