jQuery 事件方法
jQuery 专门用于响应 HTML 页面的事件。
什么是事件？
网页可以响应的各种访问者操作都称为事件。
事件代表发生某事的精确时刻。
示例
- 鼠标移动到某个元素上
- 选择一个单选按钮
- 点击某个元素
事件经常使用 “触发/触发” 这个词。例如：“按键事件在按下某个键的瞬间触发”。
以下是一些常见的 DOM 事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
要为页面上的所有段落分配一个点击事件，您可以这样做：
$("p").click();
下一步是定义当事件触发时应该发生什么。您必须将一个函数传递给该事件。
$("p").click(function(){
// 操作放在这里！！
});
常用 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载时执行一个函数。此事件已在 jQuery 语法章节中进行了解释。
click()
click() 方法将事件处理函数附加到 HTML 元素。
当用户单击 HTML 元素时，该函数将被执行。
以下示例表示：当点击一个 <p> 元素时；隐藏当前的 <p> 元素。
dblclick()
dblclick() 方法将事件处理函数附加到 HTML 元素。
当用户双击 HTML 元素时，该函数将被执行。
mouseenter()
mouseenter() 方法将事件处理函数附加到 HTML 元素。
当鼠标指针进入 HTML 元素时，该函数将被执行。
mouseleave()
mouseleave() 方法将事件处理函数附加到 HTML 元素。
当鼠标指针离开 HTML 元素时，该函数将被执行。
mousedown()
mousedown() 方法将事件处理函数附加到 HTML 元素。
当鼠标在 HTML 元素上按下左键、中键或右键时，该函数将被执行。
mouseup()
mouseup() 方法将事件处理函数附加到 HTML 元素。
当鼠标在 HTML 元素上释放左键、中键或右键时，该函数将被执行。
hover()
hover() 方法接受两个函数，是 mouseenter() 和 mouseleave() 方法的组合。
第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行。
示例
$("#p1").hover(function(){
alert("你进入了 p1！");
},
function(){
alert("再见！你现在离开了 p1！");
});
自己动手试一试 »
focus()
focus() 方法将事件处理函数附加到 HTML 表单字段。
当表单字段获得焦点时，该函数将被执行。
blur()
blur() 方法将事件处理函数附加到 HTML 表单字段。
当表单字段失去焦点时，该函数将被执行。
on() 方法
on() 方法为选定的元素附加一个或多个事件处理程序。
向 <p> 元素附加一个点击事件
向 <p> 元素附加多个事件处理程序
示例
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
自己动手试一试 »
jQuery 练习
jQuery 事件方法
有关完整的 jQuery 事件参考，请参阅我们的 jQuery 事件参考。
