JavaScript学习笔记（六）—

第七章异步编码

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：停止触摸触发；