第七章 异步编码
1 事件处理程序
处理程序：即网页加载完毕后将执行的代码，称回调函数或监听器；
包含：处理函数+window.onload=函数名;
<script language="JavaScript" type="text/JavaScript"> function page(){ alert("I'm alive!"); } window.onload=page; </script>
2 响应事件的方式编写代码
getElementByTagName返回NodeList对象，
表示DOM事件对象的属性：
target:存储触发事件的对象；
type：是字符串，如（”click”,”load”）指出发生的是哪种事件
timeStamp:提供事件发生时间属性；
keyCode：告诉用户刚刚按下那个键
clientX：确定鼠标/单击位置离浏览器窗口左边缘有多远；
clientY：确定鼠标/单击位置离浏览器窗口上边缘有多远；
screenX：确定鼠标/单击位置离屏幕窗口左边缘有多远；
screenY：确定鼠标/单击位置离屏幕窗口上边缘有多远；
pageX：确定鼠标/单击位置离网页窗口左边缘有多远；
pageY：确定鼠标/单击位置离网页窗口上边缘有多远；
touches：在触摸设备上确定用户用多少根手指触摸屏幕；
程序1 单击+计时
<!doctype html> <html lang="en"> <head> <title>Image Guess</title> <meta charset="utf-8"> <style type="text/css"> body{margin:20px;} img{margin:20px;} </style> <script language="JavaScript" type="text/JavaScript"> window.onload=init; //初始捕捉事件 function init(){ var images=document.getElementsByTagName("img"); for(var i=0;i<images.length;i++) images[i].onclick=showAnswer; } //处理单击事件 function showAnswer(e){//单击产生一个事件对象被传递 var image=e.target;//target指出触发事件的元素 var name=image.id; name=name+".jpg"; image.src=name; setTimeout(reblur, 2000, image); } //时间事件，2秒后变回模糊 function reblur(image) { var name = image.id; name = name + "blur.jpg"; image.src = name; } /* function init(){ var image=document.getElementById("zero"); image.onclick=showAnswer; } window.onload=init; function showAnswer(){ var image=document.getElementById("zero"); image.src="zero.jpg"; } */ //鼠标自动 /* window.onload = function() { var images = document.getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { images[i].onmouseover = showAnswer; images[i].onmouseout = reblur; } }; function showAnswer(eventObj) { var image = eventObj.target; var name = image.id; name = name + ".jpg"; image.src = name; } function reblur(eventObj) { var image = eventObj.target; var name = image.id; name = name + "blur.jpg"; image.src = name; } */ </script> </head> <body> <img id="zero" src="zeroblur.jpg" /> <img id="one" src="oneblur.jpg" /> <img id="two" src="twoblur.jpg" /> <img id="three" src="threeblur.jpg" /> <img id="four" src="fourblur.jpg" /> <img id="five" src="fiveblur.jpg" /> </body> </html>
程序2 鼠标位置
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Pirates Booty</title> <script> window.onload = init; function init() { var map = document.getElementById("map"); map.onmousemove = showCoords; } function showCoords(eventObj) { var coords = document.getElementById("coords"); var x = eventObj.clientX;//获取位置 var y = eventObj.clientY; coords.innerHTML = "Map coordinates: " + x + ", " + y;//修改 } </script> </head> <body> <img id="map" src="map.jpg"> <p id="coords">Move mouse over map to find coordinates...</p> </body> </html>
3 事件群英谱
click：单击触发
load：加载完网页触发
unload：关闭或切换到其他网页触发
mousemove：在元素上移动鼠标触发
mouseover：鼠标移至元素上触发
mouseout：鼠标移开元素触发
keypress：按下任何键触发
resize：调整浏览器窗口大小触发
play：单击<video>元素播放按钮触发
pause：单击<video>元素暂停按钮触发
dragstart：用户拖曳网页元素时触发
drop：放下拖曳元素触发
touchstart：触摸设备，触摸并按住元素触发
touchend：停止触摸触发；
