JavaScript 学习-40.jQuery 绑定事件 on 和 bind
前言
jquery 有四种绑定事件的方式:on, bind, delegate,live。其中 live() 方法已被移除。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代。
$(selector).off(type)为元素解除绑定的事件
on 绑定事件
基本语法
$(selector).on(event,childSelector,data,function)
| 参数 | 描述 |
|---|---|
| event | 必需。事件的类型一个或多个，由空格分隔多个事件值。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 |
| data | 可选。事件额外的参数。使用函数的event.data获取 |
| function | 可选。事件的执行函数 |
给button按钮绑定click事件示例
<div>
<button id="btn1">按钮1</button>
</div>
<script>
// button绑定click 事件
$('#btn1').on('click', function () {
// do something....
console.log('btn1 点击 ...')
})
</script>
给同一个元素，多个事件绑定同一个function,event 事件名称可以中间空格隔开传多个
<div id="demo">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</div>
<script>
// button绑定click 事件
$('#btn1').on('click mouseover', function () {
// do something....
console.log('btn 点击 ...')
})
</script>
可以给多个button按钮绑定同一个事件
<div id="demo">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</div>
<script>
// button绑定click 事件
$('#demo>button').on('click', function () {
// do something....
console.log('btn 点击 ...')
})
</script>
childSelector 绑定子元素
childSelector 参数可以给子元素绑定事件
<div id="demo">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</div>
<script>
// button 绑定click 事件
$('#demo').on('click', '#btn1', function () {
// do something....
console.log('btn 点击 ...')
})
</script>
给子元素绑定事件，还能解决一个问题，比如我们新增的元素无法绑定事件问题
<body>
<div id="demo">
<button id="btn1">新增元素</button>
</div>
<script>
$(document).ready(function () {
// 点btn1按钮新增元素
$('#btn1').on('click', function () {
// do something....
$('body').append('<div><button id="btn2">按钮2</button></div>')
})
// 绑定新增#btn2元素click事件
$(document).ready(function () {
$('#btn2').on('click', function () {
// do something....
console.log('btn 点击 ...')
})
})
})
</script>
点btn1新增元素btn2，此时点btn2无法获得点击事件
主要原因是事件是在 dom 加载的时候就已经完成了，新增的 div 元素 click 事件就无效了。
解决办法：把事件绑定在body元素上，再绑定childSelector 子元素事件
// 绑定新增#btn2元素click事件
$(document).ready(function () {
$('body').on('click', '#btn2', function () {
// do something....
console.log('btn 点击 ...')
})
})
off() 方法
off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。
该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
$("#id").click(function(){
$("button").off("click");
});
bind() 方法
bind只能给符合条件的元素本身添加事件
on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件
语法
$(selector).bind(event,data,function,map)
| 参数 | 描述 |
|---|---|
| event | 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 必需。规定当事件发生时运行的函数。 |
| map | 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。 |
比如给 div 下的所有 button 添加 click 事件
<div id="demo">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</div>
可以用bind
// 点 button 添加绑定
$('#demo button').bind('click', function () {
// do something....
console.log('btn 点击 ...')
});
也可以用on
$('#demo').on('click', 'button', function () {
// do something....
console.log('btn 点击 ...')
})
使用区别：
1.用on绑定实际上是委托给了父级div,也就是只给一个元素绑定了事件
2.bind用选择器选择了div下的所有button元素 依次绑定了事件。如果有很多很多子元素区别就很大了, bind会严重影响性能。
3.新增的元素，bind无法绑定事件，on可以给新增元素绑定事件
总的来说一般用 on 就可以替代其余几个了。
