jQuery 提供了丰富的事件处理功能，使得在网页中添加交互行为变得更加简便。

1. 绑定事件：

使用 on() 方法可以将事件处理程序绑定到选定的元素上。

// 绑定点击事件
$("#myButton").on("click", function() {
  alert("按钮被点击了！");
});

on() 方法的语法如下：

$(selector).on(event, [selector], data, function)
  • event：事件类型，如 "click"、"mouseover" 等。
  • selector（可选）：事件委托的子元素选择器。
  • data（可选）：传递给事件处理程序的数据。
  • function：事件触发时执行的回调函数。

2. 事件委托：

通过事件委托，可以将事件处理程序绑定到父元素上，从而管理动态添加的子元素的事件。

// 事件委托：为所有 <li> 元素绑定点击事件
$("#parentDiv").on("click", "li", function() {
  alert("列表项被点击了！");
});

在上述示例中，#parentDiv 是父元素，li 是子元素。即使在事件绑定后动态添加了新的 <li> 元素，点击这些新元素时也会触发事件处理程序。

3. 解绑事件：

使用 off() 方法可以移除已绑定的事件处理程序。

// 解绑点击事件
$("#myButton").off("click");

off() 方法的语法如下：

$(selector).off(event, [selector], function)
  • event：要移除的事件类型。
  • selector（可选）：事件委托的子元素选择器。
  • function（可选）：要移除的事件处理程序。

4. 触发事件：

使用 trigger() 方法可以手动触发已绑定的事件。

// 手动触发点击事件
$("#myButton").trigger("click");

trigger() 方法的语法如下：

$(selector).trigger(event, [data])
  • event：事件类型。
  • data（可选）：传递给事件处理程序的数据。

5. 常见事件类型：

jQuery 支持多种事件类型，包括但不限于：

  • 鼠标事件： click、dblclick、mouseenter、mouseleave、mousemove、mouseover、mouseout。
  • 键盘事件： keydown、keypress、keyup。
  • 表单事件： submit、change、focus、blur。
  • 文档/窗口事件： load、resize、scroll、unload。

更多关于 jQuery 事件的方法和示例，请参考 菜鸟教程。