jquery绑定事件 bind和on的用法与区别分析

当开发网页时，我们需要为其中的一些元素绑定事件，例如点击、鼠标移入移出、键盘敲击等等。而 jQuery 提供了两种主要的事件绑定方法：bind 和 on。在本文中，我们将详细介绍这两种方法的用法与区别。

一、bind 方法

bind 方法是 jQuery 提供的第一种事件绑定方法。它的形式如下：

$(selector).bind(event,data,function)

其中，

• selector 表示需要绑定事件的元素，可以是标签名、类名、ID 等选择器。
• event 是需要绑定的事件类型，例如 click、mouseover、keydown 等等。
• data 是传递到事件处理函数中的额外的数据。
• function 是事件处理函数，被触发时执行的代码。

举个例子，我们来实现一个简单的点击事件：

<button id="btn">点击我</button>

$("#btn").bind("click",function(){
    alert("你点击了按钮！");
});

在这个例子中，我们使用了 bind 方法来将 click 事件绑定到按钮元素上，并定义了一个匿名函数来处理该事件。

二、on 方法

on 方法是 jQuery 提供的第二种事件绑定方法。它可以看做是 bind 方法的增强版，支持动态绑定事件，同时也可以为事件取消绑定。on 方法的形式如下：

$(selector).on(event,data,function)

其中，

• selector、data 和 function 的含义与 bind 方法中相同。
• event 有稍微不同，它是一个字符串，可以包含一个或多个空格分隔的多个事件类型。例如，"click"、"mouseover" 和 "keydown" 等等。

下面的例子中，我们将会绑定多个事件到同一元素上：

<button id="btn">点击或者鼠标移入</button>

$("#btn").on("click mouseenter",function(){
    alert("你点击了按钮或者鼠标移入了它！");
});

在这个例子中，我们将 click 和 mouseenter 这两个事件绑定到了同一个按钮上。当点击或者鼠标移入该按钮时，将会弹出一个提示框。

三、bind 和 on 方法的区别

在功能上，on 方法与 bind 方法非常相似，都可以用来绑定事件。但是，在使用中你会发现，它们在某些方面有些微小的差别：

1. on 方法支持动态绑定

bind 方法只能将事件绑定到已经存在的元素上，而如果需要为动态添加的元素绑定事件，就需要使用 live 或 delegate 方法。而 on 方法则可以一次性为整个文档的任意元素绑定事件，并且当新元素添加到文档时，它们也会自动拥有所绑定的事件。

1. on 方法支持取消绑定

当需要取消绑定时，bind 方法无法进行操作。而使用 on 方法，则可以使用 off 方法来取消已经绑定的事件。例如：

$("#btn").off("click");

这条语句将会取消按钮中绑定的 click 事件。

以上就是 jQuery 绑定事件 bind 和 on 的用法与区别分析的完整攻略，希望对大家有所帮助。