[記錄] JavaScript 中的事件(Event對象、事件源對象、事件流、事件綁定)

event對象:
什麼是event對象： 用來獲取事件的詳細信息。(如：鍵盤的狀態、鼠標的位置、鼠標按鈕的狀態)
event對象瀏覽器兼容問題：

function (ev) {
    // IE: 支持window.event
    // 標準： 事件處理函數傳入的ev對象
    var ev = ev || window.event;
}

事件源對象：

FF: event.target
IE: event.srcElement
Chreme 都支持
兼容寫法：
var target = event.target || event.srcElement;

事件委託：

什麼是事件委託： 通俗的講就是委託長輩來執行事件。
把事件綁定到事件源對象的祖先元素上，利用事件冒泡原理觸發事件。
優勢：
1. 提升性能，不須要循環全部元素一個一個綁定事件。
2. 靈活，有動態建立進來的新元素不須要從新綁定事件。

事件流：

事件捕獲：(從外往裏，一層一層觸發)
事件冒泡：(從裏往外 -> 一層一層觸發) 在一個元素對象上觸發某類事件(如onclick事件), 那麼這個事件就會向這個元素對象的父級傳遞，直到最頂級document對象或window對象。傳遞對象上全部同類事件都將被激活。
優勢：
事件冒泡容許多個操做被集中處理(把事件處理函數添加到一個父級元素上，避免把事件處理函數添加到多個子元素上), 它還能夠讓你在對象層的不一樣層捕獲到事件。
缺點：
有時候會出現干擾，所以須要阻止事件冒泡；

阻止事件冒泡：
IE： event.cancalBubble = true; 
W3C標準: event.stopPropagation();IE9如下版本不支持
封裝阻止事件冒泡函數：
function stopBubble(ev) {
    var ev = ev || window.event;
    if(ev.stopPropagation) {
        ev.stopPropagation();
    }else{
        ev.cancelBubble = true;
    }
}

阻止默認事件：
默認事件： 如表單提交，a標籤跳轉，右鍵菜單等...

1. return false; 只有以對象屬性的方式註冊的事件才生效;
2. event.preventDefault(); W3C標準，IE9如下不兼容
3. event.returnValue = false; IE
封裝阻止默認事件函數：
function cancelHandler(ev){
	var ev = ev || window.event;
	if(ev.preventDefault) {
		ev.preventDefault();
	}else{
		ev.returnValue = false;
	}
}

事件綁定/解除綁定
添加事件的方式：
1. 普通添加事件(一個元素的同一個事件上只能綁定一個事件處理函數，後定義的覆蓋以前定義的)

   oBtn.onclick = function() { console.log('A'); }
   oBtn.onclick = function() { console.log('B'); }

2. 綁定的方式添加事件(能夠添加多個事件處理函數)

   標準瀏覽器：
   添加綁定
   obj.addEventListener(type[事件名稱], fn[事件處理函數], 是否捕獲true/false);    
   解除綁定
   obj.removeEventListener(type[事件名稱], fn[事件處理函數],是否捕獲true/false);
   注意：三個參數、事件名不帶on、事件處理函數先綁定先執行、this指向綁定事件的對象。

   IE：
   添加綁定 
   obj.attachEvent('on'+type[事件名稱], fn[事件處理函數]);
   解除綁定
   obj.detachEvent('on'+type[事件名稱], fn[事件處理函數]);
   注意： 兩個參數、事件名帶on、事件處理函數先綁定後執行、this指向window。
   
   綁定事件封裝：  
   給某個對象，綁定某個事件，執行某個函數
   function addEvent(elem, type, handle) {
        if(elem.addEventListener) {
            elem.addEventListener(type, handle, false);
        }else if(elem.attachEvent) {
            elem.attaceEvent('on' + type, fnction() {
                handle.call(elem);
            });
        }else{
            elem['on' + type] = handle;
        }
   }
 
   解除綁定事件封裝：(匿名函數沒法解綁)
   function removeEvent(elem, type, handle) {
        if(elem.removeEventListener) {
            elem.removeEventListener(type, handle, false);
        }else if(elem.detachEvent) {
            elem.detachEvent('on' + type, function() {
                handle.call(elem);
            });
        }else{
            elem['on' + type] = null;
        }
   }