不同点
on比bind多一个参数 childselector , $(selector).on(event,childselector,data,function)；
可用于父元素class名不同，但子元素class名相同的情况，指定某父元素下的子元素绑定事件on可以指定后面动态加载的class名，具有灵活性；
bind()函数只能针对已经存在的元素进行事件的设置
参考文章：on和bind的区别，以及js重新渲染问题
jquery1.7版本出现之后 ，on被官方推荐使用，用于替代bind()，live()绑定事件方式
相同点
- 都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式
- 均是通过事件冒泡方式，将事件传递到document进行事件的响应
e.g.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中on()绑定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/*********添加单个事件处理*********/
$(".header").on("click", ".btn-test", function () {
//显示隐藏div
$(".container").slideToggle();
});
/********添加多个事件处理********/
//空格相隔方式
$(".header").on("mouseout click", ".btn-test", function () {
//显示隐藏div
$(".container").slideToggle();
});
//大括号替代方式
$(".header").on({
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
}, ".btn-test");
//删除事件
$(".header").off("click", ".btn-test");
});
</script>
</head>
<body>
<div class="header">
<input type="button" value="按钮" class="btn-test" />
</div>
<div class="container">
</div>
</body>
</html>
