JavaScript學習筆記（六）—— 異步編碼
阿新 • • 發佈：2019-02-09
加載 scree 鼠標位置 函數名 timestamp pagex 觸摸 切換 text
第七章 異步編碼
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"> 2021 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學習筆記（六）—— 異步編碼