jQuery和事件
通过JQuery，可以轻松响应HTML页面中的事件。例如，当鼠标进入某个HTML元素(在其上方)，离开鼠标，单击鼠标按钮等时，执行一些JavaScript代码。
这是最常用事件的列表，JQuery可以处理这些事件。实际上，它是用于为相应事件添加事件处理程序的JQuery函数的列表。
- $(document).ready()
- click()
- dblclick()
- mouseenter()
- mouseleave()
- mouseover()
- mouseout()
- mousedown()
- mouseup()
- mousemove()
- hover()
- toggle()
- focus()
- blur()
- keydown()
- keyup()
- keypress()
这些函数中的每一个都在以下各节中进行说明。
$(document).ready()
$(document).ready()函数使我们可以在文档完全加载后执行一个函数。该事件在文本JQuery $(document).ready()中进行了更详细的说明，因此在此我将不对该函数进行更详细的介绍。
click()
click()函数将事件处理函数添加到HTML元素，当用户单击HTML元素时将执行该事件处理函数。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').click(function() {
alert("Div clicked");
});
});
</script>
<div id="theDiv">Click this div!</div>
该示例选择带有idtheDiv 的div元素，并向其添加一个点击处理函数。当单击" div"时，将执行点击处理程序函数。
dblclick()
dblclick()函数的作用与click()函数的相似，只是它对双击而不是单击产生反应。
mouseenter()
mouseenter()函数将事件处理函数添加到HTML元素，当鼠标指针进入页面上的HTML元素区域时执行。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').mouseenter(function() {
alert("Div entered");
});
});
</script>
<div id="theDiv">Enter this div!</div>
mouseleave()
mouseleave()函数将事件处理函数添加到HTML元素，当鼠标指针离开页面上的HTML元素区域时执行。因此，它在函数上与mouseenter()相反。
mouseover()+ mouseout()
mouseover()和mouseout()函数的工作方式类似于mouseenter()和mouseleave()，不同之处在于，如果鼠标悬停在了mouseover()和mouseout()也会触发。或者具有事件侦听器的HTML元素的嵌套元素之外。换句话说，如果我们有一个带有4个内部" div"的" div"，则当鼠标悬停在每个嵌套的" div"上时，父div的事件处理程序将触发。
通常，这不是我们想要的效果。更常见的是，我们确实想要mouseenter()和mouseleave()的效果，而不是mouseover()和mouseout()的效果。仅当鼠标进入或者离开父HTML元素时，mouseenter()和mouseleave()才会触发。也不适用于每个子元素。
Ben Nadel在描述" mouseover()/ mouseout()"和" mouseenter()/ mouseleave()"方法之间的差异方面做得非常出色，其中包括一段演示动作差异的视频。这是他的博客文章：
MouseOver / MouseOut与MouseEnter / MouseLeave
mousedown()
当鼠标悬停在HTML元素上时，按下鼠标左键时，mousedown()函数会将事件处理函数添加到执行的HTML元素上。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').mousedown(function() {
alert("Mouse down");
});
});
</script>
<div id="theDiv">Mouse down on this div!</div>
mouseup()
mouseup()函数的作用类似于mousedown()，不同之处在于它是在用户释放鼠标左键时执行的。因此，如果用户按下鼠标左键并按住不放，则不会执行事件处理程序。直到释放鼠标按钮。
如果在按住鼠标左键时鼠标光标离开HTML元素，则该事件也不会触发。当鼠标光标位于添加了事件处理程序函数的HTML元素上方时，必须释放鼠标按钮。因此，如果在元素外部按下鼠标按钮，在按下鼠标按钮的同时鼠标光标进入HTML元素，然后释放鼠标按钮，则事件处理程序函数也将执行。
mousemove()
" mousemove()"函数将事件处理函数添加到HTML元素，如果鼠标在HTML元素内移动，则将执行该事件处理函数。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').mousemove(function() {
alert("Mouse move");
});
});
</script>
<div id="theDiv">Mouse move over this div!</div>
hover()
hover()函数是mouseenter()和mouseleave()方法的组合。 " hover()"不仅仅采用一个函数作为参数，而是采用两个。一种函数是在鼠标进入HTML元素时执行的，另一种函数是在鼠标离开HTML元素时执行的。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').hover(
function() {
alert("Div entered");
},
function() {
alert("Div left");
}
);
});
</script>
<div id="theDiv">The div...</div>
toggle()
每当单击HTML元素时，" toggle()"函数使我们能够执行多个函数之一。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').toggle(
function() {
alert("Div clicked once");
},
function() {
alert("Div clicked twice");
}
);
});
</script>
<div id="theDiv">The div...</div>
每当单击" div"时，此示例将在执行两个函数之一之间切换。
我们可以根据需要将尽可能多的函数传递给toggle()(不仅仅是上面的例子中的2个)。
focus()
focus()函数将事件处理函数添加到表单字段，该表单字段获得焦点时执行。这是一个简单的示例：
<script type="text/javascript">
$(document).ready(function() {
$('#field1').focus(
function() {
alert("Focus!");
}
);
});
</script>
<input id="field1" type="text">
blur()
blur()函数将事件处理程序函数添加到表单字段，当表单字段失去焦点时执行。换句话说，与focus()函数相反。
keydown()
keydown()函数将事件处理程序添加到表单字段，当表单字段具有焦点时，按下键时将执行该事件处理程序。这是一个例子：
<script type="text/javascript">
$(document).ready(function() {
$('#field1').keydown(
function() {
alert("Key down!");
}
);
});
</script>
<input id="field1" type="text">
keyup()
keyup()函数将事件处理程序添加到表单域，当表单域具有焦点时，释放键时将执行该事件处理程序。换句话说，它与keydown()相反。
keypress()
keypress()函数将事件处理程序添加到表单字段，当表单字段具有焦点时，在按下键(按下并释放)时执行该事件处理程序。
