JavaScript学习笔记（六）—— 异步编码

第七章异步编码

1 事件处理程序

处理程序：即网页加载完毕后将执行的代码，称回调函数或监听器；

包含：处理函数+window.onload=函数名;

 1 <script language="JavaScript" type="text/JavaScript">
 2 
 3 function page(){
 4 
 5 alert("I'm alive!");
 6 
 7 }
 8 
 9 window.onload=page;
10 
11 </script>

2 响应事件的方式编写代码

getElementByTagName返回NodeList对象，

表示DOM事件对象的属性：

target:存储触发事件的对象；

type：是字符串，如（"click","load"）指出发生的是哪种事件

timeStamp:提供事件发生时间属性；

keyCode：告诉用户刚刚按下那个键

clientX：确定鼠标/单击位置离浏览器窗口左边缘有多远；

clientY：确定鼠标/单击位置离浏览器窗口上边缘有多远；

screenX：确定鼠标/单击位置离屏幕窗口左边缘有多远；

screenY：确定鼠标/单击位置离屏幕窗口上边缘有多远；

pageX：确定鼠标/单击位置离网页窗口左边缘有多远；

pageY：确定鼠标/单击位置离网页窗口上边缘有多远；

touches：在触摸设备上确定用户用多少根手指触摸屏幕；

程序1 单击+计时

  1 <!doctype html>
  2 
  3 <html lang="en">
  4 
  5 <head>
  6 
  7 <title>Image Guess</title>
  8 
  9 <meta charset="utf-8">
 10 
 11 <style type="text/css">
 12 
 13 body{margin:20px;}
 14 
 15 img{margin:20px;}
 16 
 17 </style>
 18 
 19 <script language="JavaScript" type="text/JavaScript">
 20 
 21 window.onload=init;
 22 
 23 //初始捕捉事件
 24 
 25 function init(){
 26 
 27 var images=document.getElementsByTagName("img");
 28 
 29 for(var i=0;i<images.length;i++)
 30 
 31 images[i].onclick=showAnswer;
 32 
 33 }
 34 
 35 //处理单击事件
 36 
 37 function showAnswer(e){//单击产生一个事件对象被传递
 38 
 39 var image=e.target;//target指出触发事件的元素
 40 
 41 var name=image.id;
 42 
 43 name=name+".jpg";
 44 
 45 image.src=name;
 46 
 47  
 48 
 49 setTimeout(reblur, 2000, image);
 50 
 51 }
 52 
 53 //时间事件，2秒后变回模糊
 54 
 55 function reblur(image) {
 56 
 57 var name = image.id;
 58 
 59 name = name + "blur.jpg";
 60 
 61 image.src = name;
 62 
 63 }
 64 
 65 /*
 66 
 67 function init(){
 68 
 69 var image=document.getElementById("zero");
 70 
 71 image.onclick=showAnswer;
 72 
 73 }
 74 
 75 window.onload=init;
 76 
 77 function showAnswer(){
 78 
 79 var image=document.getElementById("zero");
 80 
 81 image.src="zero.jpg";
 82 
 83 }
 84 
 85 */
 86 
 87 //鼠标自动
 88 
 89 /*
 90 
 91 window.onload = function() {
 92 
 93 var images = document.getElementsByTagName("img");
 94 
 95 for (var i = 0; i < images.length; i++) {
 96 
 97 images[i].onmouseover = showAnswer;
 98 
 99 images[i].onmouseout = reblur;
100 
101 }
102 
103 };
104 
105 function showAnswer(eventObj) {
106 
107 var image = eventObj.target;
108 
109 var name = image.id;
110 
111 name = name + ".jpg";
112 
113 image.src = name;
114 
115 }
116 
117  
118 
119 function reblur(eventObj) {
120 
121 var image = eventObj.target;
122 
123 var name = image.id;
124 
125 name = name + "blur.jpg";
126 
127 image.src = name;
128 
129 }
130 
131 */
132 
133 </script>
134 
135 </head>
136 
137 <body>
138 
139 <img id="zero" src="zeroblur.jpg" />
140 
141 <img id="one" src="oneblur.jpg" />
142 
143 <img id="two" src="twoblur.jpg" />
144 
145 <img id="three" src="threeblur.jpg" />
146 
147 <img id="four" src="fourblur.jpg" />
148 
149 <img id="five" src="fiveblur.jpg" />
150 
151 </body>
152 
153 </html>

程序2 鼠标位置

 1 <!doctype html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7   <meta charset="utf-8">
 8 
 9   <title>Pirates Booty</title>
10 
11   <script>
12 
13 window.onload = init;
14 
15 function init() {
16 
17 var map = document.getElementById("map");
18 
19 map.onmousemove = showCoords;
20 
21 }
22 
23  
24 
25 function showCoords(eventObj) {
26 
27 var coords = document.getElementById("coords");
28 
29 var x = eventObj.clientX;//获取位置
30 
31 var y = eventObj.clientY;
32 
33 coords.innerHTML = "Map coordinates: " + x + ", " + y;//修改
34 
35 }
36 
37   </script>
38 
39 </head>
40 
41 <body>
42 
43 <img id="map" src="map.jpg">
44 
45 <p id="coords">Move mouse over map to find coordinates...</p>
46 
47 </body>
48 
49 </html>

3 事件群英谱

click：单击触发

load：加载完网页触发

unload：关闭或切换到其他网页触发

mousemove：在元素上移动鼠标触发

mouseover：鼠标移至元素上触发

mouseout：鼠标移开元素触发

keypress：按下任何键触发

resize：调整浏览器窗口大小触发

play：单击<video>元素播放按钮触发

pause：单击<video>元素暂停按钮触发

dragstart：用户拖曳网页元素时触发

drop：放下拖曳元素触发

touchstart：触摸设备，触摸并按住元素触发

touchend：停止触摸触发；