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>
