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="data: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="data:images/1.jpg" width="200" alt="图片"></div>
 27         <div id="content_2" class="none"><img src="data:images/4.jpg" width="300" alt="图片"></div>
 28         <div id="content_3" class="none"><img src="data: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="data:images/1.jpg" width=200 alt="图片" /></div>
 80         <div id="content_2" class="none"><img src="data:images/4.jpg" width=300 alt="图片" /></div>
 81         <div id="content_3" class="none"><img src="data: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="data:images/1.jpg" width=200 alt="图片" /></div>
136         <div id="content_2" class="none"><img src="data:images/4.jpg" width=300 alt="图片" /></div>
137         <div id="content_3" class="none"><img src="data:images/3.jpg" width=400 alt="图片" /></div>
138     </div>
139 </div>
140 </body>