第七章 异步编码
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：停止触摸触发；