四大绑定事件
jquery绑定事件的方法（四种）：分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off
on绑定
//给P元素添加单击事件
<body>
<p>点我一下</p>
<script src="jquery-1.10.1.min.js"></script>
<script>
$("p").on("click",function(){
alert("The paragraph was clicked");
});
</script>
</body>优点：on()可以绑定动态添加到页面元素的事件,不用关心注册该事件的元素何时被添加进来，也不需要重复绑定。
on（）绑定事件可以提升效率，
bind绑定
bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
type:事件类型，如click、change、mouseover等;
data:传入监听函数的参数，通过event.data取到。可选;
function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。
<body>
<p>点我一下</p>
<script src="jquery-1.10.1.min.js"></script>
<script>
$("p").bind("click",function(){
alert("单击P元素");
});
</script>
</body>语法：$(selector).bind(event,data,function,map)bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。
deldgate绑定
delegate(selector,type,[data],fn)
childSelector：selector的子元素，必需项。
delegate()有点像live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。
优点：你可以选择你把这个事件放到那个元素上了。
需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。
可以用在动态添加的元素上。
缺点：需要查找绑定的子元素，尽管比document少很多了，不过，你还是得浪费时间来查找。
<body>
<div>
<p>点我啊</p>
<p>随便 </p>
<p>看看</p>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
$("div").delegate("p","click",function(){
$("p").css("background-color","pink");
});
</script>
</body>live绑定
$(selector).live(event,data,function)
这个方法用到了事件委托的概念来处理事件的绑定。
优点：这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定。
那些动态添加的元素依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上。
你可以在document ready之前就可以绑定那些需要的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").bind("click",function(){
$("p").slideToggle();
});
$("button").click(function(){
var new_obj = $("<p>这是一个新的段落<p>");
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
//$(document).ready();
</script>
</head>
<body>
<div style="width:100px;height:100px;background:#000"></div>
<p id="p1">webwebwebwebwebwbewebwebwbebwebwebwe</p>
<button>在本按钮下添加新的段落</button>
</body>
</html>四种方式的异同和优缺点
相同点：1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持对未来新添加元素的事件设置；
2.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，
同样，可以用来代替live()函数，live()函数在1.9版本已经删除；
3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些；
结论
用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上。【bind：直接绑定到元素上，有一个绑一个。】
不要再用.live()了，它已经不再被推荐了。
.delegate()会提供很好的方法来提高效率，同时我们可以添加到动态创建的元素上。
.on()是整合了之前的3种方式的新事件绑定机制，我们可以用.on()来代替上述的3种方法。
绑定多事件的处理
单事件处理：例如 $(selector).bind(“click”,data,function);
多事件处理：
1.利用空格分隔多事件，例如 $(selector).bind(“click dbclick mouseout”,data,function);
2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, …})
空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数的情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数。
