当前位置：首页 > jquery

jquery事件

2026-03-02 09:44:05jquery

jQuery 事件基础

jQuery 提供了一套简洁的事件处理 API，用于绑定、触发和管理 DOM 事件。核心方法包括 on(), off(), trigger() 等，兼容多种浏览器环境。

常用事件绑定方法

click(): 绑定点击事件。
on(): 通用事件绑定，支持动态元素。
hover(): 鼠标悬停与离开的复合事件。

示例代码：

// 点击事件
$("#button").click(function() {
  alert("Button clicked!");
});

// 使用 on() 绑定动态元素
$(document).on("click", ".dynamic-element", function() {
  console.log("Dynamic element clicked");
});

事件委托

通过事件委托（Event Delegation），可以高效处理动态生成的元素。on() 方法允许将事件绑定到父元素，通过选择器过滤子元素。

示例：

$("#parent").on("click", ".child", function() {
  $(this).toggleClass("active");
});

自定义事件

jQuery 支持触发和监听自定义事件，适用于组件通信或复杂交互。

示例：

// 定义自定义事件
$("#element").on("customEvent", function() {
  console.log("Custom event triggered");
});

// 触发事件
$("#element").trigger("customEvent");

事件对象

事件处理函数接收 event 对象，包含事件相关信息（如 target, preventDefault()）。

示例：

$("#link").click(function(event) {
  event.preventDefault();
  console.log("Link prevented:", event.target.href);
});

事件解绑

使用 off() 移除事件监听，避免内存泄漏。

示例：

// 移除所有点击事件
$("#button").off("click");

// 移除特定处理函数
var handler = function() { console.log("Handler"); };
$("#button").on("click", handler);
$("#button").off("click", handler);