主要内容：
- 事件概述
- 浏覽器中的事件
- ie浏覽器事件
- 事件的相容性
- 滑鼠事件
- 文檔事件
學習目标：
一、關于事件
1.1 什麼是事件
事件就是在文檔中或者在浏覽器視窗中通過某些動作觸發。比如，單擊，滑鼠經過，鍵盤按下等。事件
通常和函數結合使用。
事件的作用：
(1)各個元素之間可以借助事件來進行互動
(2)使用者和頁面之間也可以通過事件來互動
(3)後端和頁面之間也可以通過事件來互動（減緩伺服器的壓力）
Onsubmit(送出事件和表單一起使用)
1.2 事件分類
1、滑鼠事件
onclick、ondblclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove
2、HTML事件
onload、onscoll、onsubmit、onchange、onfoucs(擷取焦點)，onblur(失去焦點)
3、鍵盤事件
onkeydown: 鍵盤按下時觸發
onkeypress:鍵盤按下并松開的瞬間觸發
onkeyup: 鍵盤擡起時觸發
二、事件的使用（重點）
2.1 HTML事件
綁定操作發生在HTML代碼中的事件，稱為HTML事件。
文法：on+事件=‘函數();函數();函數();……‘
HTML事件的移除方式：
元素.setAttribute('on+事件名'，null);
HTML事件缺陷：耦合性太強了，修改一處另一處也要修改。
當函數沒有加載成功時，使用者去觸發事件，則會報錯。
2.2 DOM0級事件
DOM0事件調用函數的幾種方式：
（1）節點.事件=function(){}
（2）節點.事件=函數名
（3）<input type=”button” οnclick=”函數名”>
在js腳本中，直接通過【on+事件名】方式綁定的事件稱為是DOM0級事件。
文法：
元素.on+事件名 = function(){需要執行的語句;}
元素[on+事件名] = function(){需要執行的語句;}
DOM0級事件的移除方式：
元素. on+事件名=null;
2.3 DOM2級事件
2.3.1 冒泡
什麼是事件冒泡?
事件由具體某個元素（子節點）逐級向上傳播（父節點，比如html）
2.3.2 捕捉
什麼是事件捕捉？
事件由某個具體的元素（父節點）逐級向下傳播（子節點）。
2.3.3 事件流
事件流：多個
嵌套的标記或者包含的标記
擁有相同的事件，其中一個元素的事件觸發，同時影響其他元素同類型的事件的觸發，我們稱之為“事件流”。
2.3.4事件流文法
方式1：對象.addEventListener(“事件類型”,”函數”,“事件流”);
針對非ie浏覽器的，事件類型：不加on方式2：對象.attachEvent(“事件類型”,”函數”,“事件流”);
針對ie浏覽器的,事件類型：加on 事件流有兩種：
1、冒泡型（事件由内到外），預設值：false
2、捕捉型（事件由外到内）值：true
在js腳本中，通過addEventListener函數綁定的事件稱為是DOM2級事件。
文法：元素.addEventListener(type,listener,useCapture)
type:事件類型。【沒有on！沒有on！沒有on！】
listener:監聽函數，綁定的函數
useCapture:是否使用捕獲機制。如果不寫，預設值為false
false:冒泡機制
true：捕獲機制
注意:DOM2級事件可以綁定多個函數，執行順序按照函數書寫的順序。
DOM2級事件的移除方式：
node.removeEventListener(type,外部函數名,useCapture)
2.3.5 Dom2事件的傳參數
2.4 DOM0和DOM2的差別
DOM0如果你寫了多個事件，隻應用最後一個！
Dom2如果您寫了多個事件，它會都應用
執行個體：單擊按鈕，給div标簽添加樣式，寬，高，背影顔色分别定義三個函數，分别使用DOM0和dom2的方式來做。
2.5 怎樣阻止冒泡
stopPropagation()：針對非ie浏覽器阻止冒泡,阻止事件的派發 cancelBubble=true：針對ie浏覽器 2.6 怎樣阻止預設行為
preventDefault() returnValue = false 2.7 執行個體：單選按鈕選顔色
2.8執行個體：多選按鈕選顔色
2.9 執行個體：樹形菜單阻止冒泡
三、IE浏覽器中的事件
3.1事件綁定
在js腳本中，通過attachEvent函數綁定事件
文法：元素.attachEvent(type,listener)
type:事件類型。【有on！有on！有on！】
listener:監聽函數，綁定的函數
注意:如果綁定多個函數，按照函數書寫的倒叙執行。
3.2事件解除
IE下DOM2級事件的移除方式：
元素.detachEvent(type,listener)
ps：匿名函數無法被移除。
四、事件相容性問題
4.1 相容性問題
由于【IE浏覽器中的事件綁定】和【非IE浏覽器中的事件綁定】方式方法都有所不同。是以單一的某種函數都不能完美解決不同浏覽器下的方法綁定問題。
4.2 相容性封裝
五、滑鼠事件
5.1 關于滑鼠事件
滑鼠單擊是觸發：click
滑鼠輕按兩下是觸發：dbclick
滑鼠按下時觸發：mousedown
滑鼠擡起時觸發：mouseup
滑鼠移動時觸發：mousemove
滑鼠移入時觸發(不冒泡)： mouseenter
滑鼠移出時觸發(不冒泡)： mouseleave
滑鼠移入時觸發(冒泡)： mouseover
滑鼠移出時觸發(冒泡)： mouseout
文法：元素.on+滑鼠事件名稱 = 調用函數
例如：d1.ondblclick = function () { console.log('這是d1');}
5.2 mouseover和mouseenter的差別
5.3執行個體：調色闆
5.4執行個體：div跟随滑鼠移動