jQuery 事件
在本教程中，您将学习如何使用 jQuery 处理事件。
什么是事件
事件通常由用户与网页的交互触发，例如单击链接或按钮、在输入框或文本区域输入文本、在选择框中进行选择、按下键盘上的键、鼠标 指针移动等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。
jQuery 通过为大多数原生浏览器事件提供事件方法来增强基本事件处理机制，其中一些方法是 ready(), click(), keypress(), focus(), blur(), change(), 等。例如，要在 DOM 就绪时执行一些 JavaScript 代码，可以使用 jQuery ready () 方法，如下所示：
<script>
$(document).ready(function(){
// 要执行的代码
alert("Hello World!");
});
</script>注意： $(document).ready() 是一个事件，用于使用 jQuery 安全地操作页面。 此事件中包含的代码只会在页面 DOM 准备好时运行，即当文档准备好被操作时。
一般来说，事件可以分为四大类 — 鼠标事件、键盘事件、表单事件< /a> 和 文档/窗口事件。 以下部分将一一为您简要概述所有这些事件以及相关的 jQuery 方法。
鼠标事件
当用户单击某个元素、移动鼠标指针等时会触发鼠标事件。这里有一些常用的 jQuery 方法来处理鼠标事件。
click() 方法
jQuery click() 方法将事件处理函数附加到"click"事件的选定元素。 当用户单击该元素时，将执行附加的功能。 以下示例将在单击页面时隐藏页面上的 <p> 元素。
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>注意： jQuery 事件处理函数中的 this 关键字是对当前正在传递事件的元素的引用。
dblclick() 方法
jQuery dblclick() 方法将事件处理函数附加到"dblclick"事件的选定元素。 当用户双击该元素时执行附加的功能。 以下示例将在双击 <p> 元素时隐藏它们。
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover() 方法
jQuery hover() 方法将一个或两个事件处理函数附加到当鼠标指针进入和离开元素时执行的选定元素。 第一个函数在用户将鼠标指针放在一个元素上时执行，而第二个函数在用户从该元素上移开鼠标指针时执行。
以下示例将在您将光标放在 <p> 元素上时突出显示它，当您移除光标时突出显示将被移除。
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>提示： 您可以认为 hover() 方法是 jQuery mouseenter() 和 mouseleave() 方法的组合。
mouseenter() 方法
jQuery mouseenter() 方法将一个事件处理函数附加到当鼠标进入一个元素时执行的选定元素。 下面的示例将在您将光标放在 <p> 元素上时将类高亮添加到它。
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave() 方法
jQuery mouseleave() 方法将一个事件处理函数附加到当鼠标离开一个元素时执行的选定元素。 当您从 <p> 元素中移除光标时，以下示例将从 <p> 元素中移除类突出显示。
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>更多鼠标事件方法请查看 jQuery 事件参考 »
键盘事件
当用户按下或释放键盘上的键时会触发键盘事件。 下面是一些常用的 jQuery 方法来处理键盘事件。
keypress() 方法
jQuery keypress() 方法将事件处理函数附加到选定元素（通常是表单控件），当浏览器接收到用户的键盘输入时执行该函数。 以下示例将在触发 kypress 事件时显示一条消息，以及在您按下键盘上的键时触发多少次。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>注意： keypress 事件与 keydown 事件类似，不同之处在于修饰键和非打印键（如 Shift、Esc、Backspace 或 Delete、箭头键等）会触发 keydown 事件，但不会触发 keypress 事件。
keydown() 方法
jQuery keydown() 方法将一个事件处理函数附加到选定的元素（通常是表单控件），当用户第一次按下键盘上的键时执行该函数。 以下示例将在触发 keydown 事件时显示一条消息，以及在您按下键盘上的键时触发多少次。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup() 方法
jQuery keyup() 方法将事件处理函数附加到选定元素（通常是表单控件），当用户释放键盘上的键时执行该函数。 以下示例将在触发 keyup 事件时显示一条消息，以及在您按下并释放键盘上的某个键时触发多少次。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>提示： 键盘事件可以附加到任何元素，但该事件只发送到具有焦点的元素。 这就是为什么键盘事件通常附加到文本输入框或文本区域等表单控件的原因。
表单事件
当表单控件接收或失去焦点或用户修改表单控件值时触发表单事件，例如通过在文本输入中键入文本、在选择框中选择任何选项等。这里有一些常用的 jQuery 方法 处理表单事件。
change() 方法
jQuery change() 方法将事件处理函数附加到 <input>, <textarea> 和 <select> 元素，当它的值改变时执行。 当您在下拉选择框中选择任何选项时，以下示例将显示一条警报消息。
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>注意： 对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于文本输入和 textarea，该事件会在元素失去焦点后触发 .
focus() 方法
jQuery focus() 方法将事件处理函数附加到选定元素（通常是表单控件和链接），当它获得焦点时执行该函数。 以下示例将在文本输入获得焦点时显示一条消息。
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur() 方法
jQuery blur() 方法将一个事件处理函数附加到表单元素（例如 <input>, <textarea>, <select>），当它失去焦点时执行。 以下示例将在文本输入失去焦点时显示一条消息。
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit() 方法
jQuery submit() 方法将事件处理函数附加到 <form> 元素，当用户尝试提交表单时执行该函数。 以下示例将根据您尝试提交表单时输入的值显示一条消息。
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>提示： 可以通过单击提交按钮或在某些表单元素具有焦点时按 Enter 来提交表单。
Document/Window 事件
在页面 DOM（文档对象模型）准备好或用户调整大小或滚动浏览器窗口等情况下也会触发事件。这里有一些常用的 jQuery 方法来处理此类事件。
ready() 方法
jQuery ready() 方法指定了在 DOM 完全加载时执行的函数。
一旦 DOM 层次结构完全构建并准备好进行操作，以下示例将替换段落文本。
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize() 方法
jQuery resize() 方法将一个事件处理函数附加到窗口元素，当浏览器窗口的大小改变时执行该函数。
以下示例将在您尝试通过拖动角来调整浏览器窗口的大小时显示浏览器窗口的当前宽度和高度。
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll() 方法
jQuery scroll() 方法将一个事件处理函数附加到窗口或可滚动的 iframe 和元素，只要元素的滚动位置发生变化，就会执行这些函数。
以下示例将在您滚动浏览器窗口时显示一条消息。
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>