基本事件介绍
- blur() 失去焦点
- change() 改变(select)
- click() 单机
- dbclick() 双击
- error() 页面异常
- focus() 获得焦点
- focusin() jquery提供的额外事件。获得焦点。js focus。区别：focusin可以在父元素上检测到子元素获取焦点
- fucusout() jquery提供的额外事件。失去焦点。js blur。区别：fucusout可以在父元素上检测到子元素失去焦点
- keydown() 键盘按下
- keypress() 键盘按
- keyup() 键盘弹起
- mousedown() 鼠标按下
- mouseenter() jquery提供的额外事件。鼠标移入。js mouseover 区别：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
- mouseleave() jquery提供的额外事件。鼠标移出。js mouseout 区别：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
- mousemove() 鼠标移动
- mouseover() 鼠标移入
- mouseout() 鼠标移出
- mouseup() 鼠标弹起
- resize() 改变大小
- scroll() 滚动
- select() 选择
- submit() 提交
- unload() 页面卸载(页面关闭)
代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 #e02{ 8 border: 1px solid #000000; 9 height: 200px; 10 width: 200px; 11 } 12 13 </style> 14 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("#e01").blur(function(){ 18 $("#textMsg").html("文本框失去焦点：blur"); 19 }).focus(function(){ 20 $("#textMsg").html("文本框获得焦点：focus"); 21 }).keydown(function(){ 22 $("#textMsg").append("键盘按下：keydown"); 23 }).keypress(function(event){ 24 $("#textMsg").append("键盘按下：keypress"); 25 }).keyup(function(){ 26 $("#textMsg").append("键盘按下：keyup"); 27 }).select(function(event){ 28 //支持谷歌 29 var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd); 30 $("#textMsg").html("文本内容被选中：select ， " + sub); 31 }); 32 33 var i = 0; 34 $("#e02").mouseover(function(){ 35 $("#divMsg").html("鼠标移上：mouseover"); 36 }).mousemove(function(){ 37 $("#divMsg").html("鼠标移动：mousemove , " + i++ ); 38 }).mouseout(function(){ 39 $("#divMsg").html("鼠标移出：mouseout"); 40 }).mousedown(function(){ 41 $("#divMsg").html("鼠标按下：mousedown"); 42 }).mouseup(function(){ 43 $("#divMsg").html("鼠标弹起：mouseup"); 44 }); 45 46 $("#e03").click(function(){ 47 $("#buttonMsg").html("单击：click"); 48 }).dblclick(function(){ 49 $("#buttonMsg").html("双击：dblclick"); 50 }); 51 52 }); 53 54 55 56 57 58 </script> 59 60 </head> 61 <body> 62 <input id="e01" type="text" /><span id="textMsg"></span> <br/> 63 <hr/> 64 <div id="e02" ></div><span id="divMsg"></span> <br/> 65 <hr/> 66 <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/> 67 </body> 68 </html>