jQuery 事件绑定方法对比
bind、live、delegate、on 四种事件绑定方法的区别与用法
问题
jQuery 中的 bind()、live()、delegate()、on() 有什么区别？
解答
这四个方法是 jQuery 事件绑定的演进历程，从 bind() 到 on() 逐步优化。
bind()
直接绑定到元素上，不支持动态元素。
// 直接绑定到已存在的元素
$('.btn').bind('click', function() {
console.log('clicked');
});
// 等价于
$('.btn').click(function() {
console.log('clicked');
});问题：动态添加的 .btn 元素不会有事件。
live()
通过事件冒泡到 document 实现委托，支持动态元素。
// 事件委托到 document
$('.btn').live('click', function() {
console.log('clicked');
});
// 动态添加的 .btn 也能响应点击
$('body').append('<button class="btn">New Button</button>');问题：
- 所有事件都冒泡到
document，性能差 - jQuery 1.7 已废弃，1.9 移除
delegate()
指定委托的父元素，比 live() 更高效。
// 事件委托到指定父元素
$('#container').delegate('.btn', 'click', function() {
console.log('clicked');
});
// 只在 #container 内的 .btn 生效优点：可以控制事件冒泡的范围。
on()
jQuery 1.7+ 推荐方法，统一了前面所有方法。
// 直接绑定（替代 bind）
$('.btn').on('click', function() {
console.log('clicked');
});
// 事件委托（替代 delegate）
$('#container').on('click', '.btn', function() {
console.log('clicked');
console.log($(this).text()); // this 指向触发事件的 .btn
});
// 绑定多个事件
$('.btn').on('click mouseenter', function(e) {
console.log(e.type);
});
// 绑定多个事件到不同处理函数
$('.btn').on({
click: function() {
console.log('clicked');
},
mouseenter: function() {
console.log('hovered');
}
});
// 只执行一次
$('.btn').one('click', function() {
console.log('只触发一次');
});完整示例
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
</div>
<button id="add">添加按钮</button>
<script>
// 事件委托：动态元素也能响应
$('#container').on('click', '.btn', function() {
alert($(this).text());
});
// 动态添加按钮
$('#add').on('click', function() {
$('#container').append('<button class="btn">New Button</button>');
});
</script>
</body>
</html>方法对比表
| 方法 | 委托位置 | 动态元素 | 状态 |
|---|---|---|---|
| bind() | 元素自身 | ❌ | 已废弃 |
| live() | document | ✅ | 已移除 |
| delegate() | 指定父元素 | ✅ | 已废弃 |
| on() | 可选 | ✅ | 推荐 |
关键点
on()是目前唯一推荐的方法，其他都已废弃或移除- 事件委托的原理是利用事件冒泡，在父元素上监听子元素事件
- 委托父元素越接近目标元素，性能越好
- 动态添加的元素必须使用事件委托才能绑定事件
on()的第二个参数（选择器）决定是直接绑定还是事件委托
目录