jQuery on()方法绑定事件
在之前的学习中，我们接触了各种事件操作。实际上，在 jQuery 中，我们除了采用“基本事件”的方式来为元素添加事件之外，还可以采用“绑定事件”的方式。
在 jQuery 中，我们可以使用 on() 方法为元素绑定一个事件或者多个事件。jQuery 的 on() 方法，有点类似于 JavaScript 的 addEventListener() 方法。
语法：
上面是 on() 方法的简略语法，这也是为了照顾初学的小伙伴，以免一下子被复杂的语法绕进去。新手只需要掌握这个语法就可以了。对于 on() 方法的完整语法，感兴趣的小伙伴可以自行搜索了解一下。
type 是必选参数，它是一个字符串，表示事件类型。例如单击事件是 "click"，按下事件是 "mousedown"，以此类推。fn 也是必选参数，它是一个匿名函数，即 function(){}。
jQuery on()方法为“已经存在的元素”绑定事件
在 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>
预览效果如图 1 所示。
图 1：为“已经存在的元素”绑定事件
在这个例子中，按钮本身在 HTML 文档中是已经存在的。细心的小伙伴可能会想，我使用 click() 方法为按钮添加单击事件不也可以吗？
$("#btn").on("click",function(){
alert("城东书院，给你初恋般的感觉");
})
实际上，上面这段代码等价于：
$("#btn").click(function(){
alert("城东书院，给你初恋般的感觉");
})
由此我们可以得出一个结论：在 jQuery 中，如果想要为元素添加事件，我们有两种方法，一种是“基本事件”（如 click() 等），另一种是“绑定事件”。
jQuery on()方法为“动态创建的元素”绑定事件
在 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>
预览效果如图 2 所示。
图 2：为“动态创建的元素”绑定事件
在这个例子中，按钮一开始在 HTML 文件中是不存在的，而是由 jQuery 动态创建的。当然，我们直接使用基本事件，也是可以为动态创建的元素添加事件的，小伙伴们可以试一下。
实际上，on() 方法还有一种同时绑定多个事件的语法，不过这个语法没太多用处。就算要绑定多个事件，我们直接用多个 on() 方法即可。为了减轻记忆负担，大家可以忽略这种语法。
答疑解惑
在 jQuery 中绑定事件不是还有 bind() 方法和 live() 方法吗？为什么不给我们介绍一下？
从 jQuery1.7 开始（我们现在用的是 jQuery 1.12.4），对于绑定事件，jQuery 官方建议使用 on() 方法来统一取代以前的 bind()、live() 和 delegate() 方法；对于解绑事件，jQuery 官方也建议使用 off() 方法来统一取代以前的 unbind()、die() 和 undelegate() 方法。因此，大家必须清楚这一点。以后如果在其他书看到 bind()、live() 等这些方法，直接忽略即可。
湘公网安备 43102202000103号