jQuery 事件方法大全-超全的总结

jQuery 提供了多种事件处理方法，包括 .on(), .off(), .trigger() 等。以下是一些常用的 jQuery 事件处理方法：

1. .on(event, handler)：绑定事件处理程序。

$("#button").on("click", function() {
    alert("按钮被点击了！");
});

2. .off(event, handler)：移除事件处理程序。

$("#button").off("click");

3. .trigger(event, [eventData])：触发事件。

$("#button").trigger("click");

4. .one(event, handler)：绑定一次性事件处理程序。

$("#button").one("click", function() {
    alert("按钮只会被点击一次！");
});

5. .bind(event, handler)：（已废弃，请使用 .on()）。
6. .unbind(event, handler)：（已废弃，请使用 .off()）。
7. .delegate(selector, event, handler)：（已废弃，请使用 .on()）。
8. .undelegate(selector, event, handler)：（已废弃，请使用 .off()）。
9. .hover([over], out)：用于模拟鼠标悬停事件（鼠标指针移动到元素上面 & 移出元素）。

$("#button").hover(
    function() {
        // 鼠标指针移动到元素上面
        $(this).css("background-color", "yellow");
    }, 
    function() {
        // 鼠标指针移出元素
        $(this).css("background-color", "blue");
    }
);

10. .focus(), .blur()：处理焦点事件。

$("#inputField").focus(function() {
    $(this).css("background-color", "yellow");
});
 
$("#inputField").blur(function() {
    $(this).css("background-color", "white");
});

11. .change()：处理内容改变事件（如输入框内容改变）。

$("#inputField").change(function() {
    alert("输入字段的内容已改变！");
});

12. .submit()：处理表单提交事件。

$("#myForm").submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    alert("表单将不会被提交！");
});

13. .resize(), .scroll()：处理窗口大小改变和滚动事件。

$(window).resize(function() {
    console.log("窗口大小已改变！");
});
 
$(window).scroll(function() {
    console.log("窗口滚动了！");
});

14. .keydown(), .keyup(), .keypress()：处理键盘按键事件。

$(document).keydown(function(event) {
    console.log("按下了键：" + event.key);
});

15. .click(), .dblclick(), .mousedown(), .mouseup(), .mousemove(), .mouseenter(), .mouseleave()：处理鼠标点击、双击、按下、抬起、移动、进入和离开事件。

$("#button").click(function() {
    alert("按钮被点击了！");
});

16. .toggle(fn, fn)：绑定