jquery 事件
jQuery 事件基础
jQuery 的事件系统简化了 DOM 事件处理，提供跨浏览器兼容性和链式调用支持。核心方法包括：
.on()：绑定事件处理函数，支持动态元素。.off()：解绑事件处理函数。.trigger()：手动触发事件。
示例代码：
// 绑定点击事件
$("#button").on("click", function() {
alert("Button clicked!");
});
// 解绑事件
$("#button").off("click");
// 触发事件
$("#button").trigger("click");常见事件类型
jQuery 支持原生 DOM 事件（如 click、mouseenter）和自定义事件：
- 鼠标事件：
click,dblclick,mouseenter,mouseleave - 键盘事件：
keypress,keydown,keyup - 表单事件：
submit,change,focus,blur
示例：
// 表单提交阻止默认行为
$("form").on("submit", function(e) {
e.preventDefault();
console.log("Form submitted");
});事件委托
通过 .on() 实现事件委托，处理动态添加的元素：
// 委托给父元素处理子元素点击
$("#parent").on("click", ".child", function() {
console.log("Child element clicked");
});事件对象
事件处理函数接收 event 对象，常用属性：
event.target：触发事件的原始元素。event.currentTarget：当前处理事件的元素。event.preventDefault()：阻止默认行为。
示例：
$("a").on("click", function(e) {
e.preventDefault();
console.log("Link prevented:", e.target.href);
});自定义事件
通过 .trigger() 触发自定义事件：
// 定义自定义事件
$("#element").on("customEvent", function() {
console.log("Custom event triggered");
});
// 触发事件
$("#element").trigger("customEvent");一次性事件
使用 .one() 绑定仅执行一次的事件：
$("#button").one("click", function() {
console.log("This runs only once");
});注意事项
- 事件委托可优化性能，尤其适合动态内容。
- 避免过度绑定事件，使用命名空间（如
click.namespace）便于管理。 - jQuery 3.0+ 推荐使用
.on()替代已废弃的.bind()、.live()等方法。
通过合理使用 jQuery 事件，可以高效实现交互逻辑，同时保持代码简洁。
