事件-JavaScript入門基礎（014）
技術標籤：JavaScriptjavascriptjqueryhtml
滑鼠事件：
| 事件 | 描述 |
| onclick | 單擊元素 |
| oncontextmenu | 右鍵彈出選單 |
| ondbclick | 雙擊元素 |
| onmousedown | 元素上按下滑鼠鍵 |
| onmouseenter | 滑鼠指標移動到元素上 |
| onmouseleave | 滑鼠移動到元素外 |
| onmousemove | 滑鼠指標在元素上移動 |
| onmouseover | 滑鼠指標移動到一個元素或其子元素 |
鍵盤事件：
| 事件 | 描述 |
| onkeydown | 按下一個鍵 |
| onkeypress | 按下並彈起按鍵 |
| onkeyup | 釋放按鍵 |
| onerror | 載入外部檔案錯誤 |
| onload | 載入物件 |
| onresize | 調整檢視大小 |
| onscroll | 滾動條 |
表單事件：
| 事件 | 描述 |
| onblur | 失去焦點 |
| onchange | 狀態變化 |
| onfocus | 獲得焦點 |
| onreset | 重置表單 |
| onselect | 選擇文字 |
| onsubmit | 提交表單 |
以上是JavaScript中的常用事件。
事件處理器：
它是JavaScript檢測到一個特定事件時所執行的一段程式碼。
內聯處理器：
<input type="button" value="tip" onclick="javascript:alert('你單擊了我');">通常就是直接在事件中直接處理的。可以明確寫javascript:，也可以省略。
<inputtype="button"value="tip"onclick="alert('你單擊了我');">作為DOM物件的屬性的事件處理器：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>window.onload(function () {var button1 = document.getElementById('btn1');button1.onclick = function () {alert("你單擊了我");}});</script></head><body><input type="button" value="tip" id="btn1"></body></html>
以上程式碼，我們可以看出，頁面中有一個按鈕，我們需要給這個按鈕新增一個onclick單擊事件，我們可以在頁面載入函式window.onload中，先獲取按鈕物件，然後給物件的onclick事件，新增一個匿名處理函式，函式中只有一個處理操作，就是彈出提示框。
如果不適用匿名函式，使用具名函式也是可以的。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>function sayHello() {alert('你單擊了我。');}window.onload = function () {var button1 = document.getElementById('btn1');button1.onclick = sayHello;}</script></head><body><input type="button" id="btn1" value="按鈕"></body></html>
這裡需要記住，在給button1物件的onclick事件賦值處理函式時，只需要賦值函式名稱即可，不需要帶括號，因為帶括號意味著執行函式體的程式碼。
使用addEventListener()方法：
當我們需要給一個元素新增多個事件處理器時，就需要使用這個方法了。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>function f1() {alert("我處理一部分");}function f2() {alert("我處理另一個部分");}window.onload = function () {var button1 = document.getElementById('btn1');button1.addEventListener('click',f1);button1.addEventListener('click',f2);}</script></head><body><input type="button" id="btn1" value="多處理函式"></body></html>
這裡需要注意一點，就是addEventListener方法中，對事件的引數不需要帶on，比如按鈕的單擊事件是onclick，引數1新增時，只需要寫click，就可以了。你可以這樣理解，把事件中的on去掉，就是引數1。
從上面程式碼中，可以看到，我們可以對一個按鈕添加了兩個處理函式，分別處理不同的內容。
當我們需要對新增的多餘處理函式，移除時，可以這樣：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>function f1() {alert("我處理一部分");}function f2() {alert("我處理另一個部分");}window.onload = function () {var button1 = document.getElementById('btn1');button1.addEventListener('click',f1);button1.addEventListener('click',f2);var button2 = document.getElementById('btn2');button2.onclick = function () {var button1 = document.getElementById('btn1');button1.removeEventListener('click',f1);button1.removeEventListener('click',f2);}}</script></head><body><input type="button" id="btn1" value="多處理函式"><input type="button" id="btn2" value="移除"></body></html>
以上程式碼，我們通過移除，就可以動態的把button1物件的全部處理時間函式，都拿掉了。
event物件：
在鍵盤事件中，很多時候我們需要知道使用者具體按下了什麼鍵，可以通過event物件獲得。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>function myFunc(event) {var key1 = event.keyCode;if(key1 == 27){alert('你按下了esc鍵');}}window.onload = function () {var input1 = document.getElementById('text1');input1.addEventListener('keydown',myFunc);}</script></head><body><input type="text" id="text1"></body></html>
以上程式碼中，有一個文字輸入框，我們為其添加了一個onkeydown事件，處理函式中，判斷當按下esc鍵時，彈出提示框。event物件的keyCode屬性獲取按鍵碼，27代表esc鍵。
事件的發生順序：
當點選滑鼠按鍵時，mousedown，mouseup和click，是按照什麼順序發生的呢？
mousedown和mouseup事件都在click事件之前發生。
下節我們分享關於邏輯控制的內容。
