基本事件介绍
- 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>
