<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<script src="./jquery/jquery-1.11.3.min.js"></script>
</head>
???<div class="pop">
???????<li class="Li">1</li>
???????<li class="Li">2</li>
???????<li class="Li">3</li>
???????<li class="Li">4</li>
???</div>
<body>
<script>
???/****************************************关于 on *************************************************/
???//自 jQuery 版本 1.7 起，on()方法是bind()live()和delegate() 方法的新的替代品。该方法给 API 带来很多便利
???//该方法可用于事件委托
???$(‘div‘).on(‘click‘,‘li‘,function () {
???????alert($(this).text())
???});
???$(‘.pop‘).on(‘click‘,‘.Li‘,function () { ?//这种写法是为了区别选择器的时候经常忘记Li的那个点但其实没影响
???????alert($(this).text())
???});
???//注册多个事件情况写法
???$(‘div‘).on({
???????click:function () {
???????????console.log($(this).text())
???????},
???????mouseover:function () {
???????????console.log($(this).text())
???????}
???},‘li‘);
???/*****************************************关于 bind ***************************************************/
???//不支持事件委托
???$(‘div‘).bind(‘click mouseover‘,function () { //绑定多个事件
???????alert($(this).text())
???})
???/*****************************************关于 delegate ************************************************/
???//支持事件委托
???$(‘div‘).delegate(‘li‘,‘click‘,function () { ??//写法位置有点区别
???????alert($(this).text())
???})
</script>
</body>
</html>
jquery on、bind、delegate方法简单总结
原文地址：https://www.cnblogs.com/zou1234/p/8309992.html