1. on可以对动态创建的元素进行绑定，而bind不行
如：
对.btn进行绑定点击事件，点击.btn后会新增另一个.btn按钮
<button class="btn">btn1</button>
- 使用bind绑定
$(".btn").bind("click",function(){
var newBtn = '<button class="btn">btnAdd</button>'
$("body").append(newBtn);
})
点击新增的btnAdd按钮后无法触发事件
ZZ.gif
- 使用on绑定
使用on直接对元素进行事件绑定和bind的效果相同
$(".btn").on("click",function(){
var newBtn = '<button class="btn">btnAdd</button>'
$("body").append(newBtn);
})
所以需要利用on的一个参数childSelector（可选）来实现
//点击body中类名为btn的元素触发点击事件
$("body").on("click",".btn",function(){
var newBtn = '<button class="btn">btnAdd</button>'
$("body").append(newBtn);
})
这样[图片上传中...(xx.gif-903844-1602815882681-0)]
点击新增的btnAdd按钮后也可以触发事件
xx.gif
on()方法的语法与参数
- 语法：
$(selector).on(event,childSelector,data,function)参数：
image.png
bind()方法的语法与参数
- 语法：
$(selector).off(event,selector,function(eventObj),map)参数：
image.png
2.扩展：为绑定事件添加事件名
//为.btn添加mousemove，mouseleave，mousedown事件
$(".btn").bind("mousemove.doTest",function(e){
$(this).text("mouse move")
}).bind("mouseleave.doTest", function(e){
$(this).text("mouse leave")
}).bind("mousedown.doTest", function(e){
$(this).text("mouse down");
//取消.btn所有的绑定事件
$(".btn").unbind(".doTest")
})
为.btn添加mousemove，mouseleave，mousedown事件，所有事件的事件名为doTest。触发mousedown事件时，取消.btn所有名为doTest绑定事件（利用unbind(".doTest")）。
yy.gif
