jQuery 事件
jQuery 是为响应 HTML 页面中的事件而定制的。
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"（或"激发"）例如:"当您按下按键时触发 keypress 事件"。
常见 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 元素时执行
在下面的实例中，当点击事件在某个 <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("You entered p1!");
},
function(){
alert("Bye! You now leave 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 事件参考 。
