1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 7 /* 8 1. --------------- Event DOM 事件DOM 用戶交互 ------------------ 9 當事件發生時, 執行JS功能代碼 10 11 常用事件 12 onload: 當網頁加載完成時(只能用于body) 13 onclick: 當點擊時 14 onscroll: 當拖動滾動條時 15 onmouserover: 當鼠標放上時 16 onmouseout: 當鼠標移開時 17 onsubmit: 當提交表單時 18 onreset: 當重置表單時 19 onfocus: 當獲得焦點時(光標定位到文本框) 20 onblur: 當失去焦點時(光標移開文本框) 21 onchange: 當下拉列表內容改變時 22 onselect: 當選中文本時 23 onresize: 當改變窗口大小時 24 25 每個HTML標記都有相應的事件屬性 26 每個HTML標記都對應一個元素對象, 每個元素對象也有相應的事件屬性 27 元素對象的事件屬性應該是全小寫 28 */ 29 // 函數: 圖片變大2倍 30 function changeBig() { 31 32 // 獲取img 33 var imgObj = document.getElementById("img01"); 34 35 // 變大2倍 36 imgObj.width = imgObj.width * 2; 37 } 38 39 /* 40 2. --------------------- Event對象 事件對象 --------------------- 41 當事件發生時, 向調用函數傳遞一個Event參數, 它就是一個事件對象 42 事件對象記錄了事件發生時的環境信息, 如: 點擊的坐標, 事件類型等 43 事件對象的存在是很短暫的, 新的事件發生, 新的事件對象產生, 原來的事件對象消失 44 */ 45 46 window.onload = function () { 47 48 // 獲取img元素對象 49 var imgObj = document.getElementById("img01"); 50 51 // 添加點擊事件 52 // 不能傳遞參數, 默認傳過去 53 imgObj.onclick = get_xy; 54 } 55 56 // 這里必須接收 57 // 在HTML中, 通過事件來傳遞事件對象參數 58 // 第一個形參必須是事件對象 59 /* 60 3. ------------------------------ Event對象屬性 ------------------------ 61 type: 當前事件類型 62 clientX, clientY 距離窗口左邊和上邊的距離 63 pageX, pageY 距離網頁左邊和上邊的距離 64 screenX, screenY 距離屏幕左邊和上邊的距離 65 */ 66 function get_xy(e) { 67 68 // 獲取點擊時坐標信息 69 var str = "窗口左邊距離: " + e.clientX + ", 窗口上邊距離: " + e.clientY; 70 str += "\n網頁左邊距離: " + e.pageX + ", 網頁上邊距離: " + e.pageY; 71 str += "\n屏幕左邊距離: " + e.screenX + ", 屏幕上邊距離: " + e.screenY; 72 str += "\n事件類型: " + e.type; 73 alert(str); 74 } 75 76 // 在IE中, Event對象是window對象的一個屬性, 可以直接在函數中使用, 不需要傳參數 77 function get_xy2() { 78 79 // 獲取點擊時坐標信息 80 var str = "窗口左邊距離: " + event.clientX + ", 窗口上邊距離: " + event.clientY; 81 str += "\n網頁左邊距離: " + event.x + ", 網頁上邊距離: " + event.y; 82 str += "\n屏幕左邊距離: " + event.screenX + ", 屏幕上邊距離: " + event.screenY; 83 str += "\n事件類型: " + event.type; 84 alert(str); 85 86 } 87 88 </script> 89 </head> 90 <body> 91 92 <!-- 圖片變大 --> 93 <!-- <img id="img01" src="images/003.png" οnclick="changeBig()" width="100"> --> 94 95 <!-- 事件對象 --> 96 <!-- <img src="images/003.png" width="200" οnclick="get_xy(event)"> --> 97 <img src="images/003.png" width="200" id="img01"> 98 99 </body> 100 </html>
?
