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：停止触摸触发；
标签：异步,编码,网页,鼠标,单击,触发,JavaScript,var,有多远 来源： https://www.cnblogs.com/weimingai/p/10356892.html