一.關于獲取事件對象
FF有點倔強，只支持arguments[0]，不支持window.event。這次真的不怪IE，雖然把event作為window的屬性不合規范，但大家都已經默許這個小問題存在了，只有FF這么多年了還是特立獨行。所以，跨瀏覽器的事件對象獲取有以下兩種方式：
帶參的：
getEvent : function(event){ return event ? event : window.event; //return event || window.event;//或者更簡單的方式}無參的：
function getEvent() { return arguments[0] ? arguments[0] : window.event; //return arguments[0] || window.event;//或者更簡單的方式}需要特別說明一種方式：HTML的DOM0級方式 + 帶參的事件處理器，如下：
function handler(event){ //do something}<!-- HTML的DOM0級方式 -->
<button id="btn" onclick="handler(event);">按鈕</button>
上面這種方式是全瀏覽器兼容的，但依賴HTML的DOM0級方式的缺點很明顯，所以沒能成為像前兩種那樣的主流方法，而JS的DOM0級方式 + 帶參的事件處理器，如下：
function handler(event){ //do something}btn.onclick = handler;//JS的DOM0級方式//btn.onclick = function(event){/*do something*/}//或者匿名函數，效果同上這種方式不是全瀏覽器兼容的，[IE8-]不支持，IE9+未知，FF，Chrome支持。一直以為HTML的DOM0級事件處理和JS的DOM0級事件處理是等價的，現在做了很多實驗才發現二者是有區別的
二.關于獲取事件源
event.srcElement是[IE8-]唯一的方式，IE9+未知，其它瀏覽器都支持標準的event.target方式
三.關于阻止事件默認行為
event.preventDefault()是標準方法，但[IE8-]不支持，IE自己的方式是event.returnValue = false;
四.關于停止事件傳播
event.stopPropagation()是標準方法，IE又有意見了，他要這么玩：event.cancelBubble = true;這里需要特別注意了，因為cancel是屬性而不是方法，與標準相差甚遠，容易記錯
五.關于事件處理器的添加和移除
DOM0級方式
ele.onclick = handler;ele.onclick=null;最古老的一種方式
優點：全瀏覽器兼容
缺點：同一事件只能綁定/解綁一個事件處理器
DOM2級方式
ele.add/removeEventListener(eventType, handler, catch);
和IE方式：ele.attach/detachEvent(‘on'+eventType, handler);
優點：支持綁定/解綁多個事件處理器
缺點：需要做兼容性判斷。需要注意的是：標準方式中最后一個參數表示是否在事件捕獲階段綁定/解綁，IE不支持事件捕獲，所以也就沒有第三個參數了
注意：IE方式不僅方法名與標準不同，參數中事件類型還要加上on，否則綁定無效但不報錯
六.跨瀏覽器的事件處理
//跨瀏覽器的事件處理器添加方式var EventUtil = { addHandler : function(elem, type, handler){ if(elem.addEventListener){ elem.addEventListener(type, handler, false); } else if(elem.attachEvent){ elem.attachEvent("on" + type, handler);//添加多個同一類型的handler時，IE方式的規則是最后添加的最先觸發 } else{ if(typeof elem["on" + type] === 'function'){ var oldHandler = elem["on" + type]; elem["on" + type] = function(){ oldHandler(); handler(); } } else{ elem["on" + type] = handler;//支持添加多個事件處理器 } } }, getEvent : function(event){ return event ? event : window.event; }, getTarget : function(event){ return event.target || event.srcElement; }, preventDefault : function(event){ if(event.preventDefault){ event.preventDefault(); } else{ event.returnValue = false; } }, removeHandler : function(elem, type, handler){ if(elem.removeEventListener){ elem.removeEventListener(type, handler, false); } else if(elem.detachEvent){ elem.detachEvent("on" + type, handler); } else{ elem["on" + type] = null;//不支持移除單一事件處理器，只能全部移除 } }, stopPropagation : function(event){ if(event.stopPropagation){ event.stopPropagation(); } else{ event.cancelBubble = true; } }, getRelatedTarget : function(event){ if(event.relatedTarget){ return event.relatedTarget; } else if(event.toElement && event.type == "mouseout"){ return event.toElement; } else if(event.fromElement && event.type == "mouseover"){ return event.fromElement; } else{ return null; } }, /*IE8點擊左鍵和中鍵都是0；FF無法識別中鍵；Chrome正常*/ getButton : function(event){//返回0，1，2 - 左，中，右 if(document.implementation.hasFeature("MouseEvents", "2.0")){ return event.button; } else{ switch(event.button){ case 0:case 1:case 3:case 5:case 7: return 0; break; case 2:case 6: return 2; break; case 4: return 1; break; default: break; } } }, /*只能檢測keypress事件，返回值等于將要顯示的字符編碼*/ /*IE和Chrome只有能顯示的字符鍵才觸發，FF其它鍵也能觸發，返回值為0*/ getCharCode : function(event){ if(typeof event.charCode == "number"){ return event.charCode; } else{ return event.keyCode; } }};綜合示例
如果項目中沒有使用諸如 jQuery 之類的庫，如何方便地為元素綁定事件，并兼容各種瀏覽器呢？下面這個簡單的 Utility 應該可以考慮。
var eventUtility = { addEvent : function(el, type, fn) { if(typeof addEventListener !== "undefined") { el.addEventListener(type, fn, false); } else if(typeof attachEvent !== "undefined") { el.attachEvent("on" + type, fn); } else { el["on" + type] = fn; } }, removeEvent : function(el, type, fn) { if(typeof removeEventListener !== "undefined") { el.removeEventListener(type, fn, false); } else if(typeof detachEvent !== "undefined") { el.detachEvent("on" + type, fn); } else { el["on" + type] = null; } }, getTarget : function(event) { if(typeof event.target !== "undefined") { return event.target; } else { return event.srcElement; } }, preventDefault : function(event) { if(typeof event.preventDefault !== "undefined") { event.preventDefault(); } else { event.returnValue = false; } }};使用方法示例：
var eventHandler = function(evt) { var target = eventUtility.getTarget(evt), tagName = target.tagName; if(evt.type === "click") { if(tagName === "A" || tagName === "BUTTON") { alert("You clicked on an A element, and the innerHTML is " + target.innerHTML + "!"); eventUtility.preventDefault(evt); } } else if(evt.type === "mouseover" && tagName === "A") { alert("mouseovered " + target.innerHTML); }};eventUtility.addEvent(document, "click", eventHandler);eventUtility.addEvent(document, "mouseover", eventHandler);eventUtility.removeEvent(document, "mouseover", eventHandler);新聞熱點
疑難解答
