事件委托必须依赖事件冒泡，因为父元素监听子元素事件需依靠事件沿DOM树向上传播；若调用event.stopPropagation()则中断冒泡导致委托失效。
事件委托为什么必须依赖事件冒泡
页面中点击一个按钮却要让外层容器执行逻辑，这种跨层级响应不是靠魔法实现的——它严格依赖浏览器原生的事件冒泡机制。
当子元素触发 click 时，事件会自动沿 DOM 树向上传播：button → div → section → body → document。没有这层传播路径，父元素就永远收不到子元素的动作信号。
如果在子元素上显式调用 event.stopPropagation()，冒泡立即中断，委托失效。这是最容易被忽略的失效原因。
jQuery 的 .on() 方法本身不制造冒泡，它只是监听已存在的冒泡流。所以禁用冒泡 = 切断委托链。
用 .on() 实现委托的三要素缺一不可
正确写法：$(父选择器).on(事件类型, 子选择器, 处理函数)。
方法一：绑定到明确的父容器（推荐）
① 确保父容器在 DOM 中真实存在且不会被整个替换（如 $('#list')）；
② 子选择器必须是字符串形式，不能传入 jQuery 对象或 DOM 节点；
③ 处理函数中的 $(this) 指向的是匹配到的子元素，不是父容器。
方法二：绑定到 document（兜底方案）
直接写 $(document).on('click', '.btn-delete', handler)，适用于父容器可能动态销毁重建的极端场景；
但要注意：document 层级过深会略微增加事件查找开销，非必要不首选。
错误示范：$('#list').on('click', handler) —— 这是普通绑定，不是委托，新追加的 li 不会响应。
动态列表项的点击处理（典型场景）
后端分页返回 JSON，前端用 JS 拼接 HTML 插入 ul，此时新生成的 li 元素根本没机会被 .on() 单独绑定。
第一步：给 ul 容器绑定委托
$('#item-list').on('click', 'li', function() { console.log('点击了第' + ($(this).index() + 1) + '项'); });
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
第二步：后续任意 append 的 li 都自动生效，无需重复绑定；
第三步：若需区分操作类型（如删除/编辑），在 li 内部用 data-action="delete" 属性标记，处理函数里读取 $(this).data('action') 分支判断。
注意：如果用 innerHTML 直接赋值重写 ul.innerHTML，原有事件监听仍保留，但所有子节点被销毁重建，委托依然有效——因为监听在 ul 上，不在 li 上。
表格内操作按钮的批量控制
表格每行末尾有「编辑」「删除」两个按钮，传统做法是给每个按钮单独绑定，100 行就要 200 次绑定，内存和性能双浪费。
方法一：按类名委托
$('#user-table').on('click', '.btn-edit', function() { editUser($(this).closest('tr').data('id')); });
方法二：按 data 属性委托（更语义化）
$('#user-table').on('click', '[data-role="delete-btn"]', function() { deleteUser($(this).data('user-id')); });
关键点：【.closest('tr') 必须存在且可向上找到对应行】，否则 data-id 取不到。若表格结构嵌套复杂，建议在 tr 上直接加 data-id，避免多层查找失败。
阻止默认行为与委托共存的写法
表单内有动态生成的提交按钮，既要阻止表单默认提交，又要让委托正常工作。
直接在委托函数里写 event.preventDefault() 即可：
$('#form-container').on('click', '[type="submit"]', function(event) {
event.preventDefault();
submitViaAjax($(this).closest('form'));
});
这一步操作起来很简单，preventDefault() 只影响当前事件，不影响冒泡路径，委托依然能捕获到点击。
