1事件類型的種類1.1滑鼠事件
| 事件名 | 說明 |
| click | 單擊 |
| dblclick | 輕按兩下 |
| mouseover | 滑鼠移入 |
| mouseout | 滑鼠移出 |
| mousemove | 滑鼠移動(會不停的觸發) |
| mouseenter | 滑鼠移入 |
| mouseleave | 滑鼠移出 |
這裡也可以看下之前jQuery裡的文章《jQuery裡的事件》
1.2鍵盤事件
鍵盤事件多用于表單元素裡，全局window
| 事件名 | 說明 |
| keydown | 鍵盤按下(如果按下不松手會一直觸發) |
| keyup | 鍵盤擡起 |
| keypress | 鍵盤按下(隻支援字元鍵，如ctrl) |
1.3HTML事件
1.window事件
| 事件名 | 說明 |
| load | 頁面加載完觸發 |
| unload | 頁面解構(重新整理頁面，關閉頁面)時觸發 |
| scroll | 頁面滾動 |
| resize | 視窗大小發生變化時觸發 |
2.表單事件
| 事件名 | 說明 |
| blur | 失去焦點觸發 |
| focus | 獲得焦點觸發 |
| select | 當我們在輸入框選中文本時觸發 |
| change | 當我們對輸入框修改且失去焦點時觸發 |
| submit | 表單送出時觸發 |
| reset | 表單重置元素時觸發 |
2擷取目前滑鼠位置
擷取目前滑鼠位置的屬性有如下表所示，但是他們的差別是原點位置(參照物)不一樣。
| 原點位置 | |
| clientX clientY | 可視視窗的左上角為原點 |
| pageX pageY | 整個頁面的左上角(包含滾出去的滾動距離) |
| screenX screenY | 電腦螢幕的左上角 |
事件對象的擷取方法都是在一個事件的回調中先傳個形參，然後 var e = ev || window . event ; 這裡window.event是為了相容IE8以下，這樣變量e滑鼠事件裡的各種屬性了，進而我們可以友善的操作滑鼠事件。
<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑鼠事件title> <script> window.onload = function () { /*事件對象： button的屬性 0 左鍵 1 滾輪 2 右鍵 */ /* 擷取目前滑鼠位置(原點位置不一樣) clientX clientY 原點位置：可視視窗的左上角為原點 pageX pageY 原點位置:整個頁面的左上角(包含滾出去的滾動距離) screenX screenY 原點位置：電腦螢幕的左上角 */ document.onmousedown = function (ev) { var e = ev || window.event; // 事件對象的擷取方法 //alert(e.button); 點選滑鼠左鍵彈出0 點選滑鼠右鍵彈出2 // alert(e.clientX + "," + e.clientY); // alert(e.pageX + "," + e.pageY); alert(e.screenX + "," + e.screenY); } }script>head><body>body>html>
小練習：
<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> a { display: block; font-size: 40px; margin: 100px; width: 130px; } #msg { width: 500px; height: 150px; background: gray; color: white; display: none; position: absolute; }style> <script> window.onload = function () { var arr = ['唐太宗', '唐高祖', '武則天', '唐玄宗']; var aAs = document.getElementsByTagName("a"); var oMsg = document.getElementById("msg"); console.log(aAs); for (var i = 0; i < aAs.length; i++) { aAs[i].index = i; aAs[i].onmouseover = function () { oMsg.innerHTML = arr[this.index] oMsg.style.display = 'block' } aAs[i].onmouseout = function () { oMsg.style.display = "none"; } //添加滑鼠移動事件 aAs[i].onmousemove = function (ev) { var e = ev || window.event; oMsg.style.left = e.clientX + 5 + "px"; oMsg.style.top = e.clientY + 5 + "px"; } } }script>head><body> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >唐太宗a> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >唐高祖a> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >武則天a> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >唐玄宗a> <div id="msg">div>body>html>
當滑鼠移上"唐太宗"幾個字的時候，結果如下，移出時它就不顯示。
3事件對象的屬性
事件對象有屬性shiftKey、altKey、ctrlKey、metaKey，其作用是和别的快捷鍵進行組合,形成一些快捷鍵操作。
| 屬性名 | 說明 |
| shiftKey | 按下shift鍵，為true,預設為false |
| altKey | 按下alt鍵 |
| ctrlKey | 按下ctrl鍵 |
| metaKey | windows系統下按下開始鍵，macos系統下按下command |
事件對象的屬性 /* shiftKey 按下shift鍵，為true,預設為false altKey 按下alt鍵 ctrlKey 按下ctrl鍵 metaKey windows系統下按下開始鍵，macos系統下按下command鍵 【注】和别的快捷鍵進行組合,形成一些快捷鍵操作。 */ window.onload = function () { document.onmousedown = function (ev) { var e = ev || window.event; var arr = []; if (e.shiftKey) { arr.push("shift") } if (e.altKey) { arr.push("alt") } if (e.ctrlKey) { arr.push("ctrl") } if (e.metaKey) { arr.push("windows") } alert(arr) } }
當我按下鍵盤上的alt和ctrl鍵點選螢幕之後，會彈出
是以可以通過這些屬性判斷使用者按了哪些鍵。
除此之外還有keyCode鍵碼屬性和charCode字元碼屬性。
keyCode 鍵碼
傳回值：鍵碼傳回的是大寫的ASCII碼值，不區分大小寫。
使用格式：var which = e.which || e.keyCode;
【注】隻在keydown下支援。
事件對象的屬性 /* keyCode 鍵碼 傳回值：鍵碼傳回的是大寫的ASCII碼值，不區分大小寫。 使用格式：var which = e.which || e.keyCode; 【注】隻在keydown下支援。 */ window.onload = function () { window.onkeydown = function (ev) { var e = ev || window.event; var which = e.which || e.keyCode; alert(which); } }
當我按下鍵盤上的大寫A和小寫a時都彈出的是大寫A對應的ASCII碼值65，也就是不區分大寫，結果一樣。
charCode 字元碼
傳回值：字元碼傳回的是當下鍵區分大小寫的ASCII碼值
使用格式：var which = e.which || e.charCode;
【注】隻在keypress下支援，隻支援字元鍵，不支援ctrl,shift這些鍵。
<html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件對象的屬性title> <script> /* charCode 字元碼 傳回值：字元碼傳回的是當下鍵區分大小寫的ASCII碼值 使用格式：var which = e.which || e.charCode; 【注】隻在keypress下支援，隻支援字元鍵，不支援ctrl,shift這些鍵。 */ window.onload = function () { window.onkeypress = function (ev) { var e = ev || window.event; var which = e.which || e.charCode; alert(which); } }script>head><body>body>html>
當我按下小寫的a時彈出其對應的ACSII碼值97，當我按下大寫的A時彈出其對應的ACSII碼值65