jQuery 入门教程(4): Events

学习了jQuery的选择器，就可以针对选择的HMTL标记或是元素添加事件处理，事件包括按键，鼠标，单击按钮等。

下面为常见的DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery事件处理的语法

在jQuery中，大部分的DOM事件都有对应的jQuery事件，比如为所有<p>标记添加单击事件处理：

[javascript]  view plain copy print ?

1. $("p").click();  

下一步添加单击事件的处理函数，你必须传一个回调函数给单击事件：

[javascript]  view plain copy print ?

1. $("p").click(function(){  
2.   // action goes here!!  
3. });  

 

常见的jQuery事件

$(document).ready()

文档准备好事件，在文档完全载入后执行。

click()

用户单击某个HTML元素后调用，比如下面的例子中用户点击<p>标记部分后隐藏该标记的内容：

[javascript]  view plain copy print ?

1. $("p").click(function(){  
2.   $(this).hide();  
3. });  

dblclick()

双击某个HTML标记时调用，比如下面代码在双击<p>元素时隐藏其内容：

[javascript]  view plain copy print ?

1. $("p").dblclick(function(){  
2.   $(this).hide();  
3. });  

mouseenter()

在鼠标进入某个HTML元素时触发，例如：

[javascript]  view plain copy print ?

1. $("#p1").mouseenter(function(){  
2.   alert("You entered p1!");  
3. });  

mouseleave()

在鼠标进入离开某个HTML元素时触发，例如：

[javascript]  view plain copy print ?

1. $("#p1").mouseleave(function(){  
2.   alert("Bye! You now leave p1!");  
3. });  

mousedown()
在按下鼠标左键时触发，例如：

[javascript]  view plain copy print ?

1. $("#p1").mousedown(function(){  
2.   alert("Mouse down over p1!");  
3. });  

mouseup()

在某个元素上释放鼠标左键时触发，例如：

[javascript]  view plain copy print ?

1. $("#p1").mouseup(function(){  
2.   alert("Mouse up over p1!");  
3. });  

hover()
在鼠标指针放在某个元素之上时触发，为mouseenter和mouseleave的组合，它的第一个回调函数中鼠标进入时调用，第二个回调函数在鼠标离开时执行，例如：

[javascript]  view plain copy print ?

1. $("#p1").hover(function(){  
2.   alert("You entered p1!");  
3.   },  
4.   function(){  
5.   alert("Bye! You now leave p1!");  
6. });  

focus()
当某个表单输入域获得焦点时调用,例如：

[javascript]  view plain copy print ?

1. $("input").focus(function(){  
2.   $(this).css("background-color","#cccccc");  
3. });  

blur()
当某个表单输入域失去焦点时调用,例如：

[javascript]  view plain copy print ?

1. $("input").blur(function(){  
2.   $(this).css("background-color","#ffffff");  
3. });