jQuery on()方法

on()方法用于将事件处理程序附加到所选元素。 on()方法取代了委托()，bind()和live()方法。建议使用此方法，因为它可以简化jQuery代码库。我们可以使用off()方法删除on()方法附加的事件处理程序。

它是jQuery中的内置方法。使用on()方法的语法如下：

句法

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

此方法接受五个参数，其中一个是必需的，其他是可选的。 on()方法的参数值定义如下。

事件：必选参数。此参数指定一个或多个事件或名称空间以附加到所选元素。如果必须指定多个事件，则事件值必须用空格分隔。

childSelector：这是一个可选参数。它指定事件处理程序将附加到的子元素。

数据：这也是一个可选参数。它是触发事件时要传递给处理程序的其他数据。

函数(eventObj)：这也是一个可选参数。它是事件触发时运行的函数。

map：这是事件地图。

现在，让我们看一些插图来了解on()方法的用法。

例1

在此示例中，有一个h3标题元素，我们在其上应用on()方法将click事件附加到该元素。我们必须单击h3元素，其文本为“单击我”才能看到效果。

 It is an example of using the jQuery on() method. 
 Click the below heading to see the effect. 
 Click me 

输出量

执行完上述代码后，输出将为-

单击给定的文本“单击我”后，将显示如下警告对话框-

例2

在前面的示例中，我们将单个事件处理程序附加到了选择器。但是在此示例中，我们将看到如何将多个事件处理程序附加到所选元素。

在这里，有一个div元素，我们在其上应用on()方法添加三个事件，它们是mouseover，mouseout和click。当我们将光标移到给定的文本“ This is div element”上时，该元素的样式和文本将发生更改，并将事件mouseover，mouseout和click附加到该文本上。

 It is an example of using the jQuery on() method. 
 Move the cursor over the below text to see the effect. 
 This is a div element. 

输出量

执行完上述代码后，输出将为-

当我们将光标移到文本“这是一个div元素”上时，输出将为-

单击文本“单击我”后，输出为-

例子3

在此示例中，我们使用on()方法将自定义事件附加到div元素。

 It is an example of using the jQuery on() method. 
 This is a div element. 
 Click the following button to see the effect. 
 Click me 

输出量

执行完上述代码后，输出将为-

点击给定的按钮后，输出将是-