JavaScript 9—事件
阿新 • • 發佈：2020-08-01
事件物件
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #areaDiv { width: 300px; height: 100px; border: 1px solid black; margin-bottom: 10px; } #showMsg{ width: 300px; height: 30px; border: 1px solid black; } </style> <script type="text/javascript"> window.onload = function () { // 當滑鼠在areaDiv中移動時，在showMsg中來顯示滑鼠的座標 // 獲取兩個div var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElementById("showMsg"); /* onmousemove 該事件將會在滑鼠在元素中移動時被觸發 事件物件 當事件的響應函式被觸發時，瀏覽器每次都會將一個事件物件作為實參傳遞進響應函式 在事件物件中封裝了當前時間相關的一切資訊，比如：滑鼠的座標 鍵盤哪個按鍵被按下 滑鼠滾輪滾動的方向...*/ areaDiv.onmousemove = function (event) { // alert(event); /* 在IE8中，響應函式被觸發時，瀏覽器不會傳遞事件物件， 在IE8及以下的瀏覽器中，是將事件物件作為window物件的屬性儲存的 */ // if (!event) { // event = window.event; // } //解決事件物件相容性問題 event = event || window.event; /* clientX可以獲取滑鼠指標的水平座標 clientY可以獲取滑鼠指標的垂直座標 */ var x = window.event.clientX; var y = window.event.clientY; // alert("x = " + x + " , y = " + y); // 在showMsg中顯示滑鼠的座標 showMsg.innerHTML = "x = " + x + " , y = " + y; } } </script> </head> <body> <div id="areaDiv"></div> <div id="showMsg"></div> </body> </html>