在上一章的学习中，我们接触了各种事件操作。实际上，在jQuery中，我们除了使用“基本事件”的方式来为元素添加事件之外，还可以使用“绑定事件”的方式为元素添加事件。
在jQuery中，我们可以使用on()方法为元素绑定一个事件或者多个事件。jQuery的on()方法，有点类似于JavaScript的addEventListener()方法。
语法：
$().on(type, fn)
说明：
上面是on()方法的简略语法，这也是为了照顾初学的小伙伴，免得一下子被砸晕。新手只需要掌握这个语法就可以了。对于on()方法的完整语法，感兴趣的小伙伴可以自行搜索了解一下。
type是必选参数，它是一个字符串，表示事件类型。例如单击事件是"click"，按下事件是"mousedown"，以此类推。
fn也是必选参数，它是一个匿名函数，即function(){}。
一、为“已经存在的元素”绑定事件
在jQuery中，我们可以使用on()方法为“已经存在的元素”绑定事件。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn").on("click",function(){
alert("绿叶，给你初恋般的感觉");
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮">
</body>
</html>
浏览器预览效果如图所示。
分析：
在这个例子中，按钮本身在HTML文档中是已经存在的。细心的小伙伴可能会想，我使用click()方法为按钮添加单击事件不也可以吗？
$("#btn").on("click",function(){
alert("绿叶，给你初恋般的感觉");
})
实际上，上面这段代码等价于：
$("#btn").click(function(){
alert("绿叶，给你初恋般的感觉");
})
由此我们可以得出一个结论：在jQuery中，如果想要为元素添加事件，我们有两种方法：一种是“基本事件”（如click()等）；另外一种是“绑定事件”。
二、为“动态创建的元素”绑定事件
在jQuery中，on()方法不仅可以为“已经存在的元素”添加绑定事件，还可以为“动态创建的元素”添加绑定事件。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
//动态创建元素
var $btn = $('<input id="btn" type="button" value="按钮">');
$($btn).appendTo("body");
//绑定事件
$("#btn").on("click",function(){
alert("绿叶，给你初恋般的感觉")
})
})
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如图所示。
分析：
在这个例子中，按钮一开始在HTML文档中是不存在的，而是由jQuery动态创建的。当然，我们直接使用基本事件，也是可以为动态创建的元素添加事件的，小伙伴们可以试一下。
实际上，on()方法还有一种同时绑定多个事件的语法。不过这个语法没太多用处。就算绑定多个事件，我们直接用多个on()方法就可以了。为了减轻记忆负担，大家可以忽略掉那种语法。
常见问题：
1．在jQuery中绑定事件不是还有bind()和live()么？为什么不给我们介绍一下？
从jQuery1.7开始（我们现在用的是jQuery1.12.4），对于绑定事件，jQuery官方都建议使用on()方法来统一取代以前的bind()、live()和delegate()；对于解绑事件，jQuery官方也建议使用off()方法来统一取代以前的unbind()、die()和undelegate()。因此，大家必须清楚这一点。以后如果在其他书看到bind()、live()等这些方法，直接忽略即可。
