jQuery 事件
在本教程中，你将学习如何使用 jQuery 处理事件。
什么是时间 Event
事件通常由用户与网页的交互触发，例如点击链接或按钮，文本输入到输入框或文本区域，选择框在选择框中进行，按键在键盘上按下，鼠标指针移动等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。
jQuery 的通过为大多数原生浏览器事件的事件的方法提高了基本的事件处理机制，其中的一些方法是 ready() ， click() ， keypress() ， focus() ， blur() ， change() 等。例如，执行一些 JavaScript 代码，当 DOM 准备就绪后，就可以使用 jQuery ready() 方法，像这样：
<script type="text/javascript">
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>
注意： $(document).ready() 是一个用于使用 jQuery 安全地操作页面的事件。此事件中包含的代码仅在页面 DOM 准备就绪时才会运行，即文档准备好被操作时。
通常，事件可以分为四个主要组 - 鼠标事件，键盘事件，表单事件和文档/窗口事件 。以下部分将逐一简要介绍所有这些事件以及相关的 jQuery 方法。
鼠标事件
当用户单击某个元素，移动鼠标指针等时会触发鼠标事件。这里有一些常用的 jQuery 方法来处理鼠标事件。
click() 方法
jQuery click() 方法将事件处理函数附加到 click 事件的选定元素。当用户单击该元素时，将执行附加功能。以下示例将在单击页面时隐藏页面上的 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
**注意：**jQuery 事件处理函数中的 this 关键字是对当前正在传递事件的元素的引用。
dblclick() 方法
jQuery dblclick() 方法将事件处理函数附加到 dblclick 事件的选定元素。当用户双击该元素时，将执行附加功能。以下示例将在双击时隐藏 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
hover() 方法
jQuery hover() 方法将一个或两个事件处理函数附加到鼠标指针进入和离开元素时执行的所选元素。当用户将鼠标指针放在元素上时执行第一个函数，而当用户从该元素移除鼠标指针时执行第二个函数。
下面的示例将在你将光标放在其上时突出显示 <p> 元素，删除光标时将删除突出显示。
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
提示： 你可以认为 hover() 方法是 jQuery mouseenter() 和 mouseleave() 方法的组合。
mouseenter() 方法
jQuery mouseenter() 方法将事件处理函数附加到鼠标进入元素时执行的所选元素。以下示例将光标放在元素上时将类高亮显示添加到 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>
mouseleave() 方法
jQuery mouseleave() 方法将事件处理函数附加到鼠标离开元素时执行的所选元素。以下示例将当光标从其上移除时，从 <p> 元素中删除 highlight 类。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
有关更多鼠标事件方法，请查看 jQuery 事件参考»
键盘事件
当用户按下或释放键盘上的键时会触发键盘事件。这里有一些常用的 jQuery 方法来处理键盘事件。
keypress() 方法
jQuery keypress() 方法将事件处理函数附加到所选元素（通常是表单控件），该元素在浏览器从用户接收键盘输入时执行。以下示例将在 kypress 事件触发时显示消息，以及按键盘上的键时触发的次数。
<script type="text/javascript">
$(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 type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
keyup() 方法
jQuery keyup() 方法将事件处理函数附加到用户在键盘上释放键时执行的所选元素（通常是表单控件）。以下示例将在触发 keyup 事件时显示消息，以及在按下并释放键盘上的键时触发的次数。
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
提示： 键盘事件可以附加到任何元素，但事件仅发送到具有焦点的元素。这就是键盘事件通常附加到表单控件（如文本输入框或 textarea）的原因。
表格活动
当表单控件接收或失去焦点或用户修改表单控件值时触发表单事件，例如在文本输入中键入文本，在选择框中选择任何选项等。这里有一些常用的 jQuery 方法处理表单事件。
change() 方法
jQuery change() 方法将事件处理函数附加到，并在其值更改时执行元素。当你在下拉选择框中选择任何选项时，以下示例将显示警告消息。 <input> <textarea> <select>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
注意： 对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发事件，但对于文本输入和文本区域，在元素失去焦点后触发事件。
focus() 方法
jQuery focus() 方法将事件处理函数附加到选定元素（通常是表单控件和链接），这些元素在获得焦点时执行。以下示例将在文本输入获得焦点时显示消息。
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
blur() 方法
jQuery 的 blur() 方法附接的事件处理函数向表单元素如 <input> ， <textarea> ， <select> 即当它失去焦点执行。以下示例将在文本输入失去焦点时显示消息。
<script type="text/javascript">
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
submit() 方法
jQuery submit() 方法将事件处理函数附加到用户尝试提交表单时执行的 <form> 元素。以下示例将显示一条消息，具体取决于你尝试提交表单时输入的值。
<script type="text/javascript">
$(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 键来提交表单。
文件/窗口事件
在页面 DOM（文档对象模型）准备就绪或用户调整大小或滚动浏览器窗口等情况下也会触发事件。以下是一些常用的 jQuery 方法来处理此类事件。
ready() 方法
jQuery ready() 方法指定在 DOM 完全加载时要执行的函数。
一旦 DOM 层次结构完全构建并准备好进行操作，以下示例将替换段落文本。
<script type="text/javascript">
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
resize() 方法
jQuery resize() 方法将事件处理函数附加到窗口元素，该元素在浏览器窗口大小发生变化时执行。
当你尝试通过拖动其角来调整浏览器窗口的大小时，以下示例将显示浏览器窗口的当前宽度和高度。
<script type="text/javascript">
$(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 type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>