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 元素时，将执行第二个函数
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 事件参考。
