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( C语言中文网，给你初恋般的感觉 

 /script 

 /head 

 body 

 input id= btn type= button value= 按钮 

 /body 

 /html 

预览效果如图 1 所示。

图 1：为 已经存在的元素 绑定事件

在这个例子中，按钮本身在 HTML 文档中是已经存在的。细心的小伙伴可能会想，我使用 click() 方法为按钮添加单击事件不也可以吗？

$( #btn ).on( click ,function(){

 alert( C语言中文网，给你初恋般的感觉 

})

实际上，上面这段代码等价于：

$( #btn ).click(function(){

 alert( C语言中文网，给你初恋般的感觉 

})

由此我们可以得出一个结论：在 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( C语言中文网，给你初恋般的感觉 )

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

23830.html

C语言htmljavaJavaScript