在网页交互开发中，页面节点经常通过Ajax或脚本插入，如果一开始用普通方式给按钮绑定了动作，后来才添加到页面的同类按钮就会完全没有反应。理解这件事背后的事件机制，才能写出稳定的交互代码。
为什么普通绑定对动态元素失效
浏览器在处理用户点击时，会从触发节点向上层父节点逐层传递事件，这被称为事件冒泡。当我们调用$('.btn').click(fn)时，jQuery在代码执行的那一刻去查找页面上匹配.btn的节点，并把处理函数直接挂在它们身上。如果之后才通过append放进来的按钮，根本不在当时的查询结果里，自然不会有任何函数监听它。
这种直接绑定方式在静态页面里没问题，但一旦涉及列表翻页、模态框异步加载、树形菜单展开等场景，就会频繁出现新元素点了没反应的情况。很多初学者会尝试在每次插入节点后重新执行一遍绑定代码，虽然能凑效，但容易造成重复绑定，且维护成本很高。
事件委托的基本原理
事件委托利用的正是前面提到的冒泡过程。我们不去给成千上万个子节点分别挂监听，而是把监听放在一个永远存在的祖先容器上，当子节点被点击，事件冒泡到容器时，再由容器判断实际触发目标是不是我们关心的元素。因为容器本身不是动态生成的，所以无论什么时候加子节点，都能被它捕获到。
在jQuery里，on方法就是实现委托的现代标准写法。它接收事件类型、选择器以及处理函数，内部会在容器层级监听，当事件发生时拿event.target去匹配选择器。这样哪怕子元素是十年后插进来的，也不影响交互。
// 假设列表容器 #list 是页面初始就有的
$('#list').on('click', '.item-btn', function() {
// this 指向被点击的 .item-btn
var id = $(this).data('id');
alert('点击了ID为' + id + '的按钮');
});
// 后面动态添加的元素也能触发
$('#list').append('<button class="item-btn" data-id="99">新按钮</button>');
live、delegate与on的差别
早期jQuery提供过live方法，它把事件绑定到document上，通过判断选择器来模拟委托。这种方式不用写容器，写起来省事，但所有事件都堆在文档根节点，导致每次交互都要做大量匹配，性能很差，已在1.9版本移除。
delegate是过渡方案，允许指定一个上下文容器，比live精准一些。而on统一了直接绑定和委托两种写法，当第二个参数是选择器时就走委托，否则就是普通绑定。现在官方推荐只用on。
| 方法 | 绑定位置 | 是否支持动态元素 | 现状 |
|---|---|---|---|
| bind / click | 目标元素自身 | 否 | 可用但不推荐用于动态场景 |
| live | document | 是 | 已废弃 |
| delegate | 指定容器 | 是 | 旧项目可见 |
| on（带选择器） | 指定容器 | 是 | 当前标准写法 |
避免委托的性能陷阱
有人图省事会把所有动态事件都委托到document或body上，比如$(document).on('click','.any',fn)。这样做虽然永远不会漏掉元素，但每次页面任意点击都要经过这个庞大容器做选择器匹配，在复杂页面里会引发明显卡顿。正确做法是把委托容器选得尽可能靠近动态元素的父级。
例如表格行里的操作按钮，就委托给表格本身而不是整个文档；弹窗里的元素，在弹窗外层容器生成时绑定一次即可。这样事件冒泡路径短，匹配范围小，既解决了动态问题，也保持了流畅度。
<div id="modal">
<button class="close">关闭</button>
<button class="save">保存</button>
</div>
<script>
// 弹窗容器若存在则就近委托
$('#modal').on('click', '.close', function() {
$('#modal').hide();
});
</script>
实践中的完整示例
下面模拟一个异步加载评论列表并支持删除的场景。容器#comments先写好，点击加载按钮后插入若干条评论，每条带删除钮。用委托方式绑定，无论加载几次都能正常删除。
$(function() {
// 就近委托给评论容器
$('#comments').on('click', '.del', function() {
$(this).closest('li').remove();
});
// 模拟动态加载
$('#load').on('click', function() {
var html = '';
for (var i = 1; i <= 3; i++) {
html += '<li>评论' + i + ' <button class="del">删除</button></li>';
}
$('#comments').append(html);
});
});
这种写法把绑定逻辑和加载逻辑解耦，不用关心元素什么时候来，只要它落在#comments里面，交互就自动生效。配合jQuery的链式调用，代码也足够直观，是动态元素事件处理最稳妥的方案。