# 1、什么是事件 瀏覽網頁時，當我們做出點擊鼠標、按鍵盤、移動鼠標等行為時，這些行為會被瀏覽器內置的JavaScript引擎所捕獲，并執行對應的某些操作（函數）。那么你的行為（動作）+ JavaScript引擎捕獲 + 執行對應的操作 = 事件。 所以，一個完整的事件應該包括： * 用戶行為； * 瀏覽器捕獲你的行為； * 執行對應的操作（函數） 常見行為有：鼠標點擊、鼠標的移動、鼠標的移入和移出、鍵盤控制等等。 事件的作用是：通過事件，我們（瀏覽網頁的人）就可以和瀏覽器進行一些交互了。 # 2、事件綁定方式 語法： ``` node.事件名 = function(){ //事件被觸發時，執行這個函數。 }; //例如 document.getElementById('btn').onclick = function(){ console.log('你點擊我了'); } ``` ``` <input type="button" value="點我試試" id="btn" /> <input type="text" id="username" value="請輸入用戶名" /> <script> //找到要綁定事件的元素節點 var btn = document.getElementById('btn'); //單擊事件 btn.onclick = function(){ alert('你真敢點'); }; //找到username，綁定獲取焦點事件 document.getElementById('username').onfocus = function () { document.getElementById('username').value = ''; }; </script> ``` 在事件處理函數中，this表示綁定事件的那個元素： 所以上面獲得焦點的事件可以優化代碼為：  練習： 頁面中有很多個td，點擊td的時候，讓td的背景顏色發生變化： > HTML代碼： ``` <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> ``` > css代碼： ``` <style> table,td{ border:solid 1px #ccc; border-collapse: collapse; /*合并邊框*/ } td{ width:150px; height:50px; /*color:rgb(30,50,10);*/ } table{ margin:10px auto; /*讓表格左右居中對齊*/ } </style> ``` > JS代碼： ``` <script> //點擊頁面中的td，點擊之后，讓被點擊的td背景顏色改變成紅色 //先找到所有的td var tds = document.getElementsByTagName('td'); // 返回數組 //循環，為每個td都綁定一個單擊事件 for(var i=0; i<tds.length; i++){ tds[i].onclick = function () { //alert(123); //this 表示綁定事件的那個td var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); this.style.backgroundColor = 'rgb('+r+', '+g+', '+b+')'; /*if(this.style.backgroundColor != 'red'){ this.style.backgroundColor = 'red'; }else{ this.style.backgroundColor = 'white'; }*/ }; } </script> ``` > 效果：  # 3、常用事件列舉 * 頁面事件： oonload ：當頁面載入完畢（頁面中的標簽和外部資源）后觸發 * 焦點事件 oonfocus ：當獲取焦點時觸發 oonblur ：當失去焦點時觸發 * 鼠標事件 oonmouseover ：當鼠標懸浮時觸發 oonmouseout ：當鼠標離開時觸發 * 鍵盤事件 oonkeypress ：當鍵盤按下時觸發（如果按住某個鍵不松開，會一直觸發press事件） oonkeydown ：當鍵盤按下時觸發 oonkeyup ：當鍵盤彈起時觸發 * 其他事件： oonchange ：內容改變時會觸發，常用于select>option。 oonsubmit ：表單提交時觸發，這個事件要給form綁定而不是給提交按鈕綁定 oonresize ： 頁面窗口改變大小時會觸發 oonscroll ：滾動條滾動時觸發 # 4、什么是事件對象 事件對象也是一個對象，它提供了一些屬性，這些屬性描述了當前事件的特點； 不同的事件中，事件對象也有所差異，比如單擊事件中，事件對象會提供pageX和pageY屬性，表示點擊的點距離頁面的距離，比如鍵盤事件中，事件對象會提供keyCode屬性，表示按的是什么鍵。 總之，事件對象中提供了一些屬性，這些屬性可以很好的描述當前的事件的特點。 # 5、如何獲取對象 * IE瀏覽器：window.event; * 火狐瀏覽器：傳遞給事件處理函數的形參 下面代碼演示獲取事件對象的方式： ``` <input type="text"> <script> document.getElementsByTagName('input')[0].onclick = function(a){ //console.log(a); // IE8+ 支持，獲取事件對象的方法 //console.log(window.event); // IE8瀏覽器 //兼容各個瀏覽器的獲取事件對象的方法 /*var e; if(window.event){ e = window.event; //IE8 }else{ e = a; // IE8+ }*/ var e = window.event||a; }; </script> ``` # 6、事件對象常用屬性 下面列舉一些事件對象中的常用屬性： * keyCode：表示鍵盤上的鍵對應的數值。 * altKey：表示是否按了alt鍵，按了結果為true，沒按結果為false（組合按鍵的時候，才會有作用） * shiftKey：表示是否按了shift鍵，按了結果為true，沒按結果為false（組合按鍵的時候，才會有作用） * ctrlKey：表示是否按了ctrl鍵，按了結果為true，沒按結果為false（組合按鍵的時候，才會有作用） * pageX: 鼠標距離頁面左邊的距離 * pageY: 鼠標距離頁面上面的距離 * screenX: 鼠標距離屏幕左邊的距離 * screenY: 鼠標距離屏幕上面的距離 下面的代碼是獲取keyCode的代碼： ``` <script> //在頁面中任何位置，按鍵，當鍵盤彈起的時候，執行函數 document.onkeyup = function(evt){ //先獲取事件對象 var e = window.event||evt; //兼容各個瀏覽器的獲取事件對象的方式 //獲取鍵盤對應的數字 var keyCode = e.keyCode; //alert(keyCode); if(keyCode == 13){ alert('您按了回車鍵'); } } </script> ```