jQuery addEventListener

在今天的文章中，我们将了解 jQuery 中的 addEventListener 函数。

jQuery 中的 AddEventListener

JavaScript 提供了 EventTarget 接口的内置 addEventListener() 方法。此方法配置每次将指定事件发送到目标时调用的函数。

jQuery 提供了一个等效的方法，叫做 .on()。与 JavaScript 的 addEventListener 方法类似，.on 方法将一个事件处理函数附加到一个或多个事件的选定元素。

语法：

.on( events [, selector ] [, data ], handler )

1. Events 是表示一种或多种事件类型的字符串，由空格和可选命名空间分隔，例如 Click 或 keydown.myPlugin。
2. selector 表示一个选择/匹配字符串，用于过滤触发事件的所选元素的后代。如果 selector 未通过或 null，则每次到达所选元素时调度事件。
3. 当引发事件时，数据在 event.data 中传递给控制器​​。
4. handler 是在引发事件时执行的函数。如果 handler 函数返回 null，false 值也可以作为快捷方式。

对于当前选定的项目，jQuery 的 .on() 方法将事件处理程序附加到对象。 .on() 方法提供了附加事件处理程序的所有功能。

任何事件名称都可用于事件参数。jQuery 迭代/循环浏览器的标准 JavaScript 事件类型，并在浏览器由于用户操作（例如触发事件的 .click）而失败时调用 handler 函数。

.trigger() 技术还可以使标准浏览器事件名称和自定义事件名称调用连接的处理程序。事件名称必须包含最好的字母数字字符、下划线和冒号。

让我们通过以下简单示例来理解它。

<button id="btn">Hello World!</button>

$('#btn').on('click', () => {
  console.log("Click event is fired.")
})

在上面的代码片段中，我们定义了按钮。一旦用户单击按钮，就会调度 click 事件，并调用 handler 函数。

这类似于 .click() 方法，它在内部触发 on('click') 方法。

尝试在任何支持 jQuery 的浏览器中运行上面的代码片段。显示以下结果。

"Click event is fired."

演示