關於事件處理的浏覽器兼容筆記

先吐幾句浏覽器兼容的槽，畢竟對這方面也剛學習，就不單獨說了。多數前端應該是以火狐為主開發浏覽器，除了有好用的firebug，火狐的嚴格解析也是主要原因。此外Safari、Opera、Chrome，當然還有IE都是不可忽略的主流浏覽器，它們對W3C標准的支持並不完全相同。說到主要區別，可以把IE視為一類，其他歸為一類。因為IE常常很另類的一個，且不說Quirks模式。

1.Event對象

Event對象屬於HTML DOM，代表事件的狀態。但IE將Event對象視為Window對象的屬性，所以使用Event對象的跨浏覽器兼容方式是:

function eventHandleFunction(evnt){
var theEvent = evnt ? evnt : window.event;
//...
}

2.事件冒泡

事件冒泡簡單說就是子元素的某事件被觸發，默認情況下父元素們的該事件會相繼被觸發。想要阻止事件冒泡，對於Mozilla浏覽器使用stopPropagation方法，而IE浏覽器使用cancleBubble屬性。阻止冒泡的兼容寫法是：

function stopEvent(evnt) {
if(evnt.stopPropagation) {
evnt.stopPropagation();
} else {
evnt.cancleBubble = true;
}
}

3.添加監聽函數

JavaScript為對象提供三個方法來實現事件監聽器：addEventListener,removeEventListener,dispatchEvent。

addEventListener的用法：

obj.addEventListener('event', eventFunction, boolean);

第三個參數是false時，事件的冒泡形式。值是true時相反，即先父後子的反冒泡順序。

但IE似乎又不一樣了，IE不支持上面的方法（不知未來會不會支持），相似方法是attachEvent,detachEvent。兼容的進行事件監聽做法是:

if(obj.addEventListener) {
obj.addEventListener("click",clickFunc,false);
} else if(obj.attachEvent) {
obj.attachEvent("onclick",clickFunc);
} else {
obj.onclick = clickFunc;
}