jquery on 与 bind 事件绑定区别
语法说明：
- on()
.on(events [,selector][,data],handler) - bind()
.bind(events [,eventsData],handler)
区别说明：
- on() 比 bind() 多了一个参数： selector
- selector 参数存在意义：事件冒泡进行事件委托
- 子元素过多，给每个子元素增加一个事件，会影响性能；
- 动态增加的元素也能绑上指定的事件；
事例展示：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>on 与 bind 事件绑定区别</title>
<script src="./js/jquery.min.js"></script>
</head>
<style>
.contain{
width:300px;
height:500px;
margin:100px auto;
}
.contain ul{}
.contain ul li{
width:100%;
height:35px;
margin-bottom:15px;
list-style: none;
}
.contain ul li button{
cursor: pointer;
}
</style>
<body>
<div class="contain">
<ul id="BtnBind">
<li><button type="button">绑定bind方法1</button></li>
<li><button type="button">绑定bind方法2</button></li>
</ul>
<hr>
<ul id="BtnOn">
<li><button type="button">绑定on方法1</button></li>
<li><button type="button">绑定on方法2</button></li>
</ul>
</div>
<script>
$(function(){
//使用bind, 下面动态加载的不能绑定上点击事件
$('#BtnBind > li > button').bind('click',function(){
alert($(this).text());
});
//使用on, 下面动态加载的可以绑定上点击事件
$('#BtnOn').on('click','li > button',function(){
alert($(this).text());
});
var timer = setTimeout(function(){
$('#BtnBind').append('<li><button type="button">绑定bind方法3 点击无效果</button></li>');
$('#BtnOn').append('<li><button type="button">绑定on方法3 点击有效果</button></li>');
clearTimeout(timer);
},3000);
});
</script>
</body>
</html>
好的记性也需要不断的练习！！！
![uni-app学习笔记(1)：模板语法[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)