jquery事件
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);注意事项
- 事件委托性能优于直接绑定大量子元素。
- 避免重复绑定相同事件，使用命名空间（如
click.namespace）管理。 - jQuery 3.0+ 移除了
live()和delegate()，推荐统一使用on()。
