jQuery 事件 keypress click mouseover blur load ......
事件流模型包括冒泡型事件流和捕获型事件流，前者从下到上一级一级的触发，后者从上到下一级级的触发。但是IE浏览器不支持捕获型事件流，所以大部分还是冒泡型事件流。
1.传统的 JavaScript 事件
（1）鼠标事件
onclick（单击） ondblclick（双击） onmousedown（按下鼠标左键） onmouseup（释放鼠标）
onmouseover（光标移动到某对象上） onmousemove（鼠标移动） onmouseout（光标离开某对象）
（2）键盘事件
onkeypress（键被按下以后） onkeydown（键被按下时） onkeyup（释放键）
（3）页面事件
onerror（出现错误） onload（页面内容完成） onresize（浏览器窗口大小改变）
onscroll（滚动条位置变化） onunload（当前页面将被改变时）
（4）表单事件
onblur（当前元素失去焦点） onchage（当前元素失去焦点且元素内容发生变化时）
onfocus（某个元素获得焦点时） onsubmit（一个表单被递交时）
2.jQuery 事件
（1）DOM 载入事件
$(document).ready(hanlder)
$().ready(handler)
$(handler)
（2）键盘事件
keypress（键被按下以后） keydown（键被按下时） keyup（释放键）
（3）鼠标事件
click（单击） dblclick（双击） mousedown（按下鼠标左键） mouseup（释放鼠标）
mouseover（光标移动到某对象上） mousemove（鼠标移动） mouseout（光标离开某对象）
（4）表单事件
blur（当前元素失去焦点） chage（当前元素失去焦点且元素内容发生变化时）
focus（某个元素获得焦点时） submit（一个表单被递交时） select（控件内容被选中时）
focusin（当前元素或其子元素获得焦点时） focusout（当前元素或其子元素失去焦点时）
其中，select 的实例如下，当选中第一个文本框中的文字时，第二个文本框自动显示选中的文本。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>Hello, jQuery!</title> 5 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $("#input1").select(function(){ 9 var selection = document.selection; 10 if(selection && selection.type == 'Text'){ 11 var word = selection.createRange(); 12 var text = word.text; 13 $("#input2").val(text); 14 } 15 }); 16 }); 17 </script> 18 </head> 19 20 <body> 21 <input id="input1" type="text"/><br/><br/> 22 <input id="input2" type="text"/> 23 </body> 24 </html>
效果如下：
另外，focusin 和 focusout 是jQuery 扩展的非常有用的事件。其实例如下：
View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>Hello, jQuery!</title> 5 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script> 6 <style type="text/css"> 7 body{ padding:20px; } 8 td{ font-size:13px; padding:3px; } 9 input{ margin:0 5px; } 10 </style> 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 $("td span").css('color','#aaa'); //初始化表格里的span元素内的字体颜色为浅灰 14 15 $("td").focusin(function() { 16 /* 子元素获得焦点时 */ 17 $(this).find("span") 18 .css('color','#a0a') 19 .css('font-weight','600'); //设置当前表格中的span元素颜色为黑色和粗细程度为600 20 }); 21 22 $("td").focusout(function() { 23 /* 子元素失去焦点时 */ 24 $(this).find("span") 25 .css('color','#aaa') 26 .css('font-weight','100'); //设置当前表格中的span元素颜色为浅灰和粗细程度为100 27 }); 28 }); 29 </script> 30 </head> 31 32 <body> 33 <h2>用户注册</h2> 34 <form> 35 <table cellspacing="0" border="0"> 36 <tr> 37 <td>用户名：</td> 38 <td><input /><span>6-20位字母、数字、下划线组合</span></td> 39 </tr> 40 <tr> 41 <td>密 码：</td> 42 <td><input /><span>5-16位任意字符</span></td> 43 </tr> 44 <tr> 45 <td>姓 名：</td> 46 <td><input /><span>请填写您的直实姓名</span></td> 47 </tr> 48 <tr> 49 <td>年 龄：</td> 50 <td><input /><span>请填写您的真实年龄</span></td> 51 </tr> 52 <tr> 53 <td>邮 箱：</td> 54 <td><input /><span>请填写您的电子邮件地址，确认身份时需要</span></td> 55 </tr> 56 <tr> 57 <td></td> 58 <td><input type="button" value="Submit" /></td> 59 </tr> 60 </table> 61 </form> 62 </body> 63 </html>
效果如下，当姓名输入框处于焦点状态时，其右侧的说明文本高亮显示：
（5）其他事件
load（当该元素加载就绪后触发） unload（当该元素卸载后触发）
error（当该元素发生错误时触发） resize（浏览器大小发生改变时触发） scroll（滚动条位置改变时触发）
jQuery 事件具有集合特性。对某个DOM元素绑定多个事件，在JavaScript中，只对最后一个事件进行绑定，而在jQeury中队所有事件进行绑定。
