首页 > 编程笔记 > JavaScript笔记 > jQuery事件

jQuery on()方法绑定事件

在之前的学习中，我们接触了各种事件操作。实际上，在 jQuery 中，我们除了采用“基本事件”的方式来为元素添加事件之外，还可以采用“绑定事件”的方式。

在 jQuery 中，我们可以使用 on() 方法为元素绑定一个事件或者多个事件。jQuery 的 on() 方法，有点类似于 JavaScript 的 addEventListener() 方法。

语法：

$().on(type, fn)

上面是 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() 等这些方法，直接忽略即可。

所有教程

优秀文章