jQuery on() 方法

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

它是 jQuery 中的一个内置方法。使用 on() 方法的语法如下所示 -

语法

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

event: 它是必填参数。此参数指定一个或多个事件或命名空间以附加到选定的元素。如果必须指定多个事件，则事件值必须用空格分隔。

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

data: 这也是一个可选参数。它是事件触发时要传递给处理程序的附加数据。

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

map: 它是事件映射。

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

示例 1

在此示例中，有一个 h3 标题元素，我们正在对其应用 on() 方法以附加 click 事件。我们必须单击文本为 Click me 的 h3 元素才能看到效果。

输出

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

单击给定文本 Click me 后，将显示一个警报对话框，如下所示 -

示例 2

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

这里有一个 div 元素，我们正在对其应用 on() 方法以添加三个事件：mouseover、mouseout 和 click。当我们将光标移到给定文本 “这是一个 div 元素” 上时，元素的样式和文本将发生变化，并且 mouseover、mouseout 和 click 事件将附加到它。

输出

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

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

单击文本 Click me 后，输出将是 -

Example3

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

输出

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

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