ES之事件綁定，解除綁定以及事件冒泡、事件捕獲

綁定事件的處理方法
任何元素都有事件屬性，而綁定事件就是將這個事件與一個函數相連接。

①句柄事件
dom.onXXX = function () {代碼塊} 以on開頭的事件屬於句柄事件
相容性非常好，但是一個事件只能綁定一個處理函數。當綁定多個時後面的會覆蓋前面的。
這種方法相當於在HTML的行間添加事件。
在行間的寫法<div onclick = "fun();或者'函數裡面的執行語句'"></div>
②
dom.addEventListener(事件類型，觸發函數，false) IE9以下不相容
該方法的兩種寫法：
div.addeventlistener('click',function(){},false)
div.addeventlistener('click',函數引用,false)
一個元素的事件可以綁定多個觸發函數，當綁定多個處理事件時，後面的不會覆蓋前面的。
如： 下麵的兩個處理函數不是同一個
div.addeventlistener('click',function(){},false)
div.addeventlistener('click',function(){},false)
但是同一種事件類型用同一個處理事件，只執行一次：
div.addEventListener('click',test,false)
div.addEventListener('click',test,false)

原理：addeventlistenner裡面的綁定函數如果是同一個函數，那麼後面的覆蓋前面的。

③IE獨有事件
dom.attachEvent('on'+事件類型，處理函數);
和addeventlistener功能類似，區別是綁定多少個事件就執行多少次。
__________________________________________________________________________
①和②中的處理函數的this指向調用的那個元素，而③中的處理函數的this指向window
解決③中的this指向問題
dom.attachEvent('on' + 事件類型, function (){ 處理函數test.call(dom);})
function test(){console.log(this)//這個this指向dom}
————————————————————————————————————————————————————————————
解除事件綁定方法：
針對①：
dom['on' + type] = null/false; 將這句放在處理函數裡面的末尾
針對②:
dom.removeEventListenner(原綁定事件類型，原處理函數引用名，false);//若原處理函數是匿名函數，則無法解除綁定。
針對③：
dom.detachEvent('on' + 事件類型，原處理函數引用名)；//若原處理函數是匿名函數，則無法解除綁定。

————————————————————————————————————————————————————————————
滑鼠事件：
click點擊、mousedown按下、mousemove移動、mouseup鬆開、
contextmenu右鍵菜單、mouseover經過、mouseout離開、mouseenter經過、mouseleave離開(後兩種是html5的)
click == mousedown + mouseup;
在事件對象中有一個代表滑鼠左鍵或右鍵或滑輪的屬性，當屬性值為0，代表左鍵，為1代表滑輪，為2代表右鍵。
DOM3規定：click只能監聽滑鼠左鍵，要想判斷滑鼠是按得左鍵或右鍵只能用mousedown或mouseup監聽

鍵盤事件：
keydown、keypress、keyup
執行順序： keydown > keypress > keyup
keydown可以監測到除了fn輔助鍵之外的其他鍵，但是keydown無法識別字元的大小寫
keypress只能檢測到字元類的按鍵(只要該字元在ascaii碼中，就能被監測到)，能區分字元大小寫。
String.fromCharCode(變數.charcCode) 返回ascaii代碼，如果變數時keypress的事件對象，那麼按那個鍵就返回相應的字元。

文本操作事件：
input事件：當在文本框中每進行一次輸入或每進行一次刪除時，都會觸發該事件。
change事件：判斷文本框聚焦和失去聚焦時，狀態是否發生改變，若改變則執行處理函數。
focus事件 聚焦
bulr事件 失去焦點

—————————————————————————————————————————————————————————————

事件冒泡：
在結構上(非視覺上)嵌套的元素，會存在事件冒泡功能，即同一個事件事件源的子元素會冒泡向父代元素(自底向上)
事件捕獲：
在結構上(非視覺上)嵌套的元素，會存在事件捕獲功能，即同一個事件從父代元素會捕獲至事件源的子元素(自頂向下)

註意點:IE沒有捕獲功能，並且除了Chrome，其他瀏覽器的舊版本也沒有，新版有捕獲功能是因為涉及到了Chrome的webkit內核。
觸發順序：先捕獲再冒泡
捕獲的寫法：dom.addEventListenner(事件類型，處理函數，ture)
冒泡的寫法：dom.addEventListenner(事件類型，處理函數，fasle)

不具備冒泡的事件：focus(聚焦)、blur()、change、submit、reset、select。
總結：不是所有事件都會冒泡。

在解決元素拖拽問題時也涉及到另一個“捕獲”，為元素設置一個滑鼠事件，當滑鼠離開該元素，事件就失效了，兩種解決辦法，
第一種滑鼠移動事件放在document元素上，無論滑鼠怎麼移動該事件都不會失效。
第二種就是“捕獲”事件了，但是只有IE能用，為目標元素dom添加setCaputure()方法，無論滑鼠在哪兒，
它都會捕獲過來，所以為了不幹擾其他元素的執行，還需要加上releaseCapture()方法。
————————————————————————————————————————————————————————————
取消事件的冒泡：
方法①：事件對象.stopPropagation(); W3C官方標準，IE9及以下不支持
事件對象：
在每個事件處理函數裡面寫一個形參，這個形參對我們來說沒用，但是系統會自動傳遞一個事件對象給形參，
這個事件對象裡面有很多屬性，每一個屬性都記載了事件發生時的關鍵性數據，同時該對象裡面還有
一個stopPropagation方法，該方法是用來取消冒泡事件。
方法②：事件對象.cancelBubble = true; IE獨有的一個屬性。(現在的Chrome也支持)

取消瀏覽中的預設事件：
方法①：在處理函數的後面加上 return false;//相容性非常好，但只有句柄綁定能使用。
註意點：該方法只能用於句柄事件，否則無效。比如： dom.onclick = function(){}
方法②：event.preventDefault();//W3C官方標準，IE9及以下不支持
註意點：該方法來也來自同一個事件對象，並且只針對非IE瀏覽器，
對IE來說，事件發生時的數據保存在window對象的event屬性中，所以在處理函數中需要添加一句
var event = e || window.event//e代表保存事件發生時存儲數據的那個對象。(只有在全局時，window可以省略不寫)
方法③：event.returnValue = false;//相容IE

a標簽的跳轉功能就是一個預設事件，可以通過方法①去掉，
也可以這樣：<a href = "script:void(false)"></a>//void相當於return，裡面的值只要讓boolean值為假就行。
————————————————————————————————————————————————————————————
事件源對象 ：是事件對象中的其中一個屬性。比如點擊事件，它記錄了滑鼠點擊的位置，返回的是某個元素，
該元素後面接的是能唯一標識這個元素的選擇器。
獲取事件源對象的方法：
event.target firefox只有這個方法
event.srcElement IE只有這個方法
這兩個方法Chrome瀏覽器都支持。
在獲取事件源對象時，考慮相容性，應寫為 var event = event.target || event.srcElement;
————————————————————————————————————————————————————————————
事件委托：
利用事件冒泡、事件源對象進行處理
優點：
1.性能方面，不需要迴圈所有的元素，一個個綁定事件。
2.靈活，當有新的子元素時，不需要再為新子元素綁定事件。
例如：一個ul元素裡面有無數個li元素，li元素的內容為該元素所在的順序數字，當點擊某個li元素，實現列印該li元素的數字。
實現：在ul上面寫一個onclick事件，由於點擊li元素會冒泡到ul元素，所以觸發了ul的點擊事件的處理函數，
而在處理函數中寫上獲取事件源對象的方法。