JS基础（二）
21、标准事件模型的事件类型（包括4个子模块）
- HTMLEvents：接口为Event，支持的事件类型包括abort、blur、change、error、focus、load、resize、scroll、select、submit、unload
- MouseEvents：接口为MouseEvent，支持的事件类型包括click、mousedown、mouseup、mousemove、mouseout、mouseover
- UIEvents：接口为UIEvent
- MutationEvents：接口为MutationEvent
| 事件类型 | 触发时机 | 接口 | 冒泡 | 默认动作 | 支持元素 |
| abort | 图像加载时中断 | Event | Y | N | img、object |
| blur | 元素失去焦点 | Event | N | N | a、area、button、input、label |
| change | 用户改变域的内容 | Event | Y | N | input、select、textarea |
| click | 鼠标单击某个对象 | MouseEvent | Y | Y | 大部分元素 |
| error | 当加载文档或图像时发生某个错误 | Event | Y | N | body、frameset、iframe、img、object |
| focus | 元素获得焦点 | Event | N | N | a、area、button、imput、label、select、textarea |
| load | 文档或图像加载完毕 | Event | N | N | body、frameset、iframe、img、object |
| mousedown | 某个鼠标按键被按下 | MouseEvent | Y | Y | 大部分元素 |
| mousemove | 鼠标被移动 | MouseEvent | Y | Y | 大部分元素 |
| mouseout | 鼠标从某元素移开 |
MouseEvent |
Y | Y | 大部分元素 |
| mouseover | 鼠标被移到某元素之上 | MouseEvent | Y | Y | 大部分元素 |
| mouseup | 某个鼠标按键被松开 | MouseEvent | Y | Y | 大部分元素 |
| reset | 表单被重置 | Event | Y | N | form |
| resize | 窗口或框架被调整尺寸 | Event | Y | N | body、iframe、frameset |
| scroll | 窗口滚动条滚动 | Event | Y | N | body |
| select | 文本被选定 | Event | Y | N | input、textarea |
| submit | 表单被提交 | Event | Y | Y | form |
| unload | 写在文档、框架集或图像 | Event | N | N | body、frameset、iframe、img、object |
22、Event对象
| 标准事件模型 | 意义 | 备注 | IE事件模型 | ||
| type | 获取事件的类型，如click、mouseout | type | 相同 | ||
| target | 发生事件的节点，一般利用该属性来获取当前被激活事件的具体对象 | srcElement | event=window.srcElement | ||
| currentTarget | 事件当前传播到的节点。如果在传播过程的捕获阶段或冒泡阶段处理事件，这个属性的值就与target属性值不同 | offsetX、offsetY | IE专有属性，声明事件发生时鼠标指针相对于源元素左上角的x轴和y轴坐标值，标准事件模型中没有对应的值 | ||
| eventPhase | 显示当前所处的事件传播过程的阶段 | ||||
| timeStamp | 事件发生的事件 | ||||
| bubbles | 显示事件是否能够在文档中冒泡 | ||||
| cancelable | 显示事件是否能够取消默认动作 | ||||
| stopPropagation() | 组织当前事件从正在处理它的节点传播 | cancelBubble | 为true时等用于stopPropagation()方法，默认false | ||
| preventDefault() | 阻止默认动作的执行 | returnValue | 为false时等同于preventDefault()方法，默认true | ||
| button | 当在声明mousedown、mouseup和click事件时，显示鼠标键的状态值。0表示左键，1表示中间键，2表示右键 | button | 键值不同，1表示左键、2表示右键、4表示中间键，可以组合使用，如1+2=3，则3表示同时按下左右键 | ||
| aktKey、ctrlKey、metaKey、ShiftKey |
表示在声明鼠标事件时，是否按下了Alt键、Ctrl键、Meta键和Shift键 |
aktKey、ctrlKey、ShiftKey | 意义相同但没有ShiftKey属性 | ||
| clientX、clientY | 声明事件发生时鼠标指针相对于客户区浏览器窗口左上角的x轴和y轴的坐标值 |
clientX、clientY |
相同 | ||
| screenX、screenY | 声明事件发生时鼠标指针相对于用户显示器左上角的x轴和y轴的坐标值 | ||||
| relatedTarget | 引用与事件的目标节点相关的节点。对与mouseover事件，它是鼠标移到目标是所离开的那个节点；对于mouseout事件，它是鼠标离开目标是将要进入的那个节点 | fromElement、toElement | 相同 |
23、
1设计鼠标拖放操作
<script>
2 // 初始化拖放对象
3 var box = document.getElementById("box");
4 // 获取页面中被拖放元素的引用指针
5 box.style.position = "absolute"; // 绝对定位
6 // 初始化变量，标准化事件对象
7 var mx, my, ox, oy; // 定义备用变量
8 function e(event){ // 定义事件对象标准化函数
9 if( ! event){ // 兼容IE浏览器
10 event = window.event;
11 event.target = event.srcElement;
12 event.layerX = event.offsetX;
13 event.layerY = event.offsetY;
14 }
15 event.mx = event.pageX || event.clientX + document.body.scrollLeft;
16 // 计算鼠标指针的x轴距离
17 event.my = event.pageY || event.clientY + document.body.scrollTop;
18 // 计算鼠标指针的y轴距离
19 return event; // 返回标准化的事件对象
20 }
21 // 定义鼠标事件处理函数
22 document.onmousedown = function(event){ // 按下鼠标时，初始化处理
23 event = e(event); // 获取标准事件对象
24 o = event.target; // 获取当前拖放的元素
25 ox = parseInt(o.offsetLeft); // 拖放元素的x轴坐标
26 oy = parseInt(o.offsetTop); // 拖放元素的y轴坐标
27 mx = event.mx; // 按下鼠标指针的x轴坐标
28 my = event.my; // 按下鼠标指针的y轴坐标
29 document.onmousemove = move; // 注册鼠标移动事件处理函数
30 document.onmouseup = stop; // 注册松开鼠标事件处理函数
31 }
32 function move(event){ // 鼠标移动处理函数
33 event = e(event);
34 o.style.left = ox + event.mx - mx + "px"; // 定义拖动元素的x轴距离
35 o.style.top = oy + event.my - my + "px"; // 定义拖动元素的y轴距离
36 }
37 function stop(event){ // 松开鼠标处理函数
38 event = e(event);
39 ox = parseInt(o.offsetLeft); // 记录拖放元素的x轴坐标
40 oy = parseInt(o.offsetTop); // 记录拖放元素的y轴坐标
41 mx = event.mx ; // 记录鼠标指针的x轴坐标
42 my = event.my ; // 记录鼠标指针的y轴坐标
43 o = document.onmousemove = document.onmouseup = null;
44 // 释放所有操作对象
45 }
46 </script>
47
设计鼠标跟随特效
48 <script>
49 var pos = function(o, x, y,event){ // 鼠标定位函数
50 var posX = 0, posY = 0; // 临时变量值
51 var e = event || window.event; // 标准化事件对象
52 if(e.pageX || e.pageY){ // 获取鼠标指针的当前坐标值
53 posX = e.pageX;
54 posY = e.pageY;
55 }
56 else if(e.clientX || e.clientY){
57 posX = e.clientX + document.documentElement.scrollLeft +
58 document.body.scrollLeft;
59 posY = e.clientY + document.documentElement.scrollTop +
60 document.body.scrollTop;
61 }
62 o.style.position = "absolute"; // 定义当前对象为绝对定位
63 o.style.top = (posY + y) + "px";
64 // 用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
65 o.style.left = (posX + x) + "px";
66 // 用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
67 }
68 </script>
69 </head>
70 <body>
71 <div id="div1">跟随鼠标的文字</div>
72 <script language="javascript" type="text/javascript">
73 var div1 = document.getElementById("div1");
74 document.onmousemove = function(event){
75 pos(div1, 10, 20,event);
76 }
77 </script>
78
跟踪鼠标在对象内相对位置
79 <script>
80 window.onload = function(){
81 var t = document.getElementById("text");
82 var box = document.getElementById("box");
83 box.onmousemove = function(event){
84 var event = event || window.event; // 标准化事件对象
85 if(event.offsetX || event.offsetY ){
86 t.value ="x:" + parseInt(event.offsetX) + "\ny:" + parseInt(event.offsetY);
87 }
88 else if(event.layerX || event.layerY ){
89 t.value ="x:" + parseInt(event.layerX - 1) + "\ny:" + parseInt(event.layerY -1) ;
90 }
91 }
92 }
93 </script>
94 </head>
95 <body>
96 <textarea id ="text"></textarea>
97 <div id="wrap">
98 <span>
99 <div id="box"></div>
100 </span>
101 </div>
102 </body>
103
设计推箱子游戏
104 <script>
105 function keyDown(event){ // 方向键控制元素移动函数
106 var event = event || window.event; // 标准化事件对象
107 switch(event.keyCode){ // 获取当前按下键盘键的编码
108 case 37 : // 按下左箭头键，向左移动42个像素
109 box.style.left = box.offsetLeft - 42 + "px";
110 break;
111 case 39 : // 按下右箭头键，向右移动42个像素
112 box.style.left = box.offsetLeft + 42 + "px";
113 break;
114 case 38 : // 按下上箭头键，向上移动42个像素
115 box.style.top = box.offsetTop - 42 + "px";
116 break;
117 case 40 : // 按下下箭头键，向下移动42个像素
118 box.style.top = box.offsetTop + 42 + "px";
119 break;
120 }
121 return false
122 }
123 window.onload = function(){
124 var box = document.getElementById("box"); // 获取页面元素的引用指针
125 box.style.position = "absolute"; // 色块绝对定位
126 document.onkeydown = keyDown; // 在Document对象中注册keyDown事件处理函数
127 }
128 </script>
129 </head>
130 <body>
131 <div id="wrap">
132 <div id="box"><img src="images/box.png" /></div>
133 </div>
134 </body>
135
自动读取选择文本
136 <script>
137 window.onload = function(){
138 var a = document.getElementsByTagName("input")[0];
139 // 获取第一个文本框的引用指针
140 var b = document.getElementsByTagName("input")[1];
141 // 获取第二个文本框的引用指针
142 a.onselect = function(){ // 为第一个文本框绑定select事件处理函数
143 if (document.selection){ // 兼容IE
144 o = document.selection.createRange(); // 创建一个选择区域
145 if(o.text.length > 0) // 如果选择区域内存在文本
146 b.value = o.text; // 则把该区域内的文本赋值给第二个文本框
147 }else{ // 兼容DOM
148 p1 = a.selectionStart; // 获取文本框中选择的初始位置
149 p2 = a.selectionEnd; // 获取文本框中选择的结束位置
150 b.value = a.value.substring(p1, p2);
151 // 截取文本框中被选取的文本字符串，然后赋值给第二个文本框
152 }
153 }
154 }
155 </script>
156
设计满屏画布背景
157 <script>
158 function w(){ // 获取窗口宽度
159 if (window.innerWidth) // 兼容DOM
160 return window.innerWidth;
161 else if ((document.body) && (document.body.clientWidth))
162 // 兼容IE
163 return document.body.clientWidth;
164 }
165 function h(){ // 获取窗口高度
166 if (window.innerHeight) // 兼容DOM
167 return window.innerHeight;
168 else if ((document.body) && (document.body.clientHeight))
169 // 兼容IE
170 return document.body.clientHeight;
171 }
172 window.onresize = function(){ // 注册resize事件处理函数，动态调整盒子大小
173 box.style.width = w() + "px";
174 box.style.height = h() + "px";
175 }
176 window.onload = function(){
177 var box = document.getElementById("box"); // 获取盒子的引用指针
178 box.style.position = "absolute"; // 绝对定位
179 box.style.zIndx = -1;
180 box.style.backgroundColor = "red"; // 背景色
181 box.style.width = w() + "px"; // 设置盒子宽度为窗口宽度的0.8倍
182 box.style.height = h() + "px"; // 设置盒子高度为窗口高度的0.8倍
183 }
184 </script>
185
设计自动跳转下拉菜单
186 <script>
187 window.onload = function(){
188 var a = document.getElementsByTagName("select")[0];
189 a.onchange = function(){
190 window.open(this.value,""); // 根据下拉列表框的当前值打开指定的网址
191 }
192 }
193 </script>
194 </head>
195 <body>
196 <select>
197 <option value="#">请选择网站</option>
198 <option value="http://www.baidu.com/">百度</option>
199 <option value="http://www.google.cn/">Google</option>
200 </select>
201 </body>
202
禁止表单提交
203 <script>
204 window.onload = function(){
205 var t = document.getElementsByTagName("input")[0];
206 // 获取文本框的引用指针
207 var f = document.getElementsByTagName("form")[0];
208 // 获取表单的引用指针
209 f.onsubmit = function(e){ // 在表单元素上注册submit事件处理函数
210 alert(t.value);
211 return false; // 禁止提交数据到服务器
212 }
213 }
214 </script>
215 </head>
216 <body>
217 <form id="form1" name="form1" method="post" action="">
218 <input type="text" name="t" id="t" />
219 <input name="" type="submit" />
220 </form>
221 </body>
24、Tab面板交互式设计
1 <script language="javascript" type="text/javascript">
2 function hover(n, counter)
3 {
4 var $ = function(o)
5 {
6 return document.getElementById(o);
7 }
8 for(var i = 1; i <= counter; i ++ )
9 {
10 $('tab_' + i).className = 'normal';
11 $('content_' + i).className = 'none';
12 }
13 $('content_' + n).className = 'show';
14 $('tab_' + n).className = 'hover';
15 }
16 </script>
17 </head>
18 <body>
19 <div class="tab_wrap">
20 <ul class="tab">
21 <li id="tab_1" class="hover" onMouseOver="hover(1,3);">Tab1</li>
22 <li id="tab_2" class="normal" onMouseOver="hover(2,3);">Tab2</li>
23 <li id="tab_3" class="normal" onMouseOver="hover(3,3);">Tab3</li>
24 </ul>
25 <div class="content">
26 <div id="content_1" class="show"><img src="images/1.jpg" width="200" alt="图片"></div>
27 <div id="content_2" class="none"><img src="images/4.jpg" width="300" alt="图片"></div>
28 <div id="content_3" class="none"><img src="images/3.jpg" width="400" alt="图片"></div>
29 </div>
30 </div>
31 </body>
32
HTML和js分离
33 <script>
34 function hover(){
35 }
36 hover.prototype = {
37 ok : function(tabs,contents,openClass,closeClass){
38 var _this = this;
39 if(tabs.length != contents.length)
40 {
41 alert("菜单项数量和内容包含框数量不一致!");
42 return false;
43 }
44 for(var i = 0 ; i < tabs.length ; i++)
45 {
46 _this.$(tabs[i]).value = i;
47 _this.$(tabs[i]).onmouseover = function(){
48
49 for(var j = 0 ; j < tabs.length ; j++)
50 {
51 _this.$(tabs[j]).className = closeClass;
52 _this.$(contents[j]).style.display = "none";
53 }
54 _this.$(tabs[this.value]).className = openClass;
55 _this.$(contents[this.value]).style.display = "block";
56 }
57 }
58 },
59 $ : function(o){
60 if(typeof(o) == "string")
61 return document.getElementById(o);
62 return o;
63 }
64 }
65 window.onload = function(){
66 var demo1 = new hover();
67 demo1.ok(["tab_1","tab_2","tab_3"],["content_1","content_2","content_3"],"hover","normal");
68 }
69 </script>
70 </head>
71 <body>
72 <div class="tab_wrap">
73 <ul class="tab">
74 <li id="tab_1" class="hover">Tab1</li>
75 <li id="tab_2" class="normal">Tab2</li>
76 <li id="tab_3" class="normal">Tab3</li>
77 </ul>
78 <div class="content">
79 <div id="content_1" class="show"><img src="images/1.jpg" width=200 alt="图片" /></div>
80 <div id="content_2" class="none"><img src="images/4.jpg" width=300 alt="图片" /></div>
81 <div id="content_3" class="none"><img src="images/3.jpg" width=400 alt="图片" /></div>
82 </div>
83 </div>
84 </body>
85
标准化Tab交互行为
86 <script>
87 function hover(event){
88 var $ = function(o){
89 if(typeof(o) == "string")
90 return document.getElementById(o);
91 return o;
92 }
93 var tab = $("tab").getElementsByTagName("li");
94 var content = $("content").getElementsByTagName("div");
95 var check=function(tab, o) {
96 if(document.addEventListener){
97 return tab.addEventListener("mouseover", o, true);
98 }
99 else if(document.attachEvent){
100 return tab.attachEvent("onmouseover", o);
101 }
102 }
103 ;
104 for(var i = 0; i < tab.length; i ++ )
105 {
106 (function(j){
107 check(tab[j], function(){
108 for(var n = 0; n < tab.length; n ++ )
109 {
110 tab[n].className = "normal";
111 content[n].className = "none";
112 }
113 tab[j].className = "hover";
114 content[j].className = "show";
115 }
116 );
117 }
118 )(i);
119 }
120 }
121 window.onload = function()
122 {
123 hover();
124 }
125 </script>
126 </head>
127 <body>
128 <div class="tab_wrap">
129 <ul class="tab" id="tab">
130 <li id="tab_1" class="hover">Tab1</li>
131 <li id="tab_2" class="normal">Tab2</li>
132 <li id="tab_3" class="normal">Tab3</li>
133 </ul>
134 <div class="content" id="content">
135 <div id="content_1" class="show"><img src="images/1.jpg" width=200 alt="图片" /></div>
136 <div id="content_2" class="none"><img src="images/4.jpg" width=300 alt="图片" /></div>
137 <div id="content_3" class="none"><img src="images/3.jpg" width=400 alt="图片" /></div>
138 </div>
139 </div>
140 </body>
