1.事件簡介
2.事件的調用方式
在script標籤中使用
在元素中調用
3.鼠標事件
鼠標點擊
鼠標移入移除
鼠標按住鬆開
4.鍵盤事件
5.表單事件
onfocus和onblur
onselect
onchange
6.編輯事件
oncopy
onselectstart
oncontextmenu
7.頁面事件
onload
onbeforeunload
8.事件監聽器
9.event對象
1.事件簡介
舉個例子，當我們點擊一個按鈕時，會彈出一個對話框。其中“點擊”就是一個事件，“彈出對話框”就是我們在點擊這個事件裏面做的一些事情。事件一般是用戶對頁面的一些‘小動作’引起的，如點擊鼠標移動鼠標，js裏邊常見的事件一般有五種：
- 鼠標事件
- 鍵盤事件
- 表單事件
- 編輯事件
- 頁面事件
2.事件的調用方式
2.1在script標籤裏邊調用
obj.事件名 = function()
{
……
};
obj是一個DOM對象
2.2在元素中調用事件
例子：
3.鼠標事件
3.1鼠標事件簡介
3.2鼠標點擊
例子：結合div模擬按鈕
3.3鼠標移入移除
例子：
3.4鼠標的按下和鬆開
4.鍵盤事件
鍵盤按下：
onkeydown
鍵盤松開：onkeyup
例子1：統計輸入字符長度(用兩張事件都行只是一個是按下統計一個鬆開後統計)
5.表單事件
5.1onfocus和onblur
onfocus：表示獲取焦點觸發的事件
onblur：表示失去焦點觸發的事件
例子1：
默認的情況需要我們點擊文本框才能自動獲取焦點，那麼我們也可以讓他們自動獲取焦點，用==focus()==方法就行
例子2：自動獲取焦點
5.2onselect
當我們選中單行或者多行文本框的時候，就會觸發此類事件
例子：手動選中文本框觸發事件
其實我們可以自動選中文本框，可以用select() 方法，看下面例子
5.3onchange
用於具有多個選項的表單元素的操作
例子1：單選框選擇某一項的時候觸發
例子2：複選框的全選和反選
例子3：下拉列表:
6.編輯事件
6.1oncopy
oncopy表示不能複製
例子：文字不能進行復制
6.2onselectstart
onselectstart防止頁面內容被選取
例子：文字內容不可被選中
6.3oncontextmenu
oncontextmenu禁止使用鼠標右鍵
例子：可以選中但是不能使用鼠標右鍵進行復制氣不氣
7.頁面事件
7.1onload
onload表示文檔加載完成後再執行一個事件
我們看下面一段代碼：
我們這一段代碼點擊提交的時候瀏覽器是會報錯的，這是由於在默認的情況下，瀏覽器是從上到下來解析一個頁面的，當解析到var oBtn = document.getElementById("btn");的時候就會報錯因爲找不到id爲btn的元素在哪，那麼正確的使用方法是:
當瀏覽器解析到window.onload時就不會解析window.onload內部的代碼而是繼續往下解析，直到把整個文檔解析完畢後在回去解析window.onload內部的代碼
7.2onbeforeunload
onbeforeunload表示離開頁面之前觸發的一個事件
我們看一個例子：
這是剛開始運行的時候。當我們關閉頁面時會出現如下(具體的e是啥會在event對象裏邊講)：
8.事件監聽器
我們直接看一個例子(下面是我第一次點擊按鈕出現的畫面)：
我們在給一個按鈕添加三次onlick事件，但是js只會執行第三次，所以 事件處理器 是不能爲同一元素添加多個事件的，那麼這時候就需要我們的事件監聽器
所謂的事件監聽器指的是使用addEventListener()方法爲元素添加一個事件，我們又稱爲綁定事件
語法：
obj.addEventListener(type,fn,false)
1.obj是一個DOM對象
2.type是一個字符串指的是事件類型如單擊事件click等，注意這裏的事件類型是不需要加上on作爲前綴的
3.fn是一個函數名(匿名函數或者函數名)
4.false表示事件冒泡階段調用(高級內容不詳細說明)
例子1：addEventListener()方法的使用
例子2：對同一元素添加多個事件
點擊按鈕後會依次彈出三個對話框
例子3：多次調用window.onload
我們會發現只有我們多次使用window.onload時會發現只會執行第三個window.onload，我們也可以用
addEventListener()方法方法來解決
那麼我們既然可以使用addEventListener()方法綁定事件，那麼也可以解除綁定某一個事件
語法：
obj.removeEventListener(type,fn,false)
注意這裏的fn只能是函數名
例子：解除事件監聽器添加的事件
當我們直接點擊文字部分就會變成粉色，當我們點擊解除按鈕的時候，再點擊文字就不會變成粉色
注意這裏的
removeEventListener()方法只能解除事件監聽器添加的事件不能解除事件處理器添加的事件
當然我們也可以解除事件處理器添加的事件，如下例子：
9.event對象
當一個事件發生後，有關的這個事件的詳細的信息都會臨時保存在一個指定的地方，這個地方就是event對象
event常用屬性：
例子1：type獲取事件的類型
這個e是以什麼玩意，實際上我們每次調用一個事件的時候js就會默認的給這個事件函數加上一個隱形的參數，這個參數就是event對象，一般來說event對象是作爲事件函數的第一個參數，e只是一個變量名，它存儲着一個event對象
例子2：keyCode獲取鍵對應的鍵碼
常用按鍵的鍵碼：
| 按鍵 | 鍵碼 |
|---|---|
| W | 87 |
| S | 83 |
| A | 65 |
| D | 68 |
| 上箭頭 | 38 |
| 下箭頭 | 40 |
| 左箭頭 | 37 |
| 右箭頭 | 39 |
如果是shift,Ctrl,Alt這幾個鍵我們不需要使用keyCode來獲取，之間通過shiftKey,ctrlKey,altKey這三個屬性來獲取
例子3：獲取上下左右方向鍵
我們在點擊各個方向的時候會顯示相應的方向的漢字