跨瀏覽器的事件物件
阿新 • • 發佈:2019-01-09
雖然DOM和IE中的event物件不同,但是基於他們之間的相似性依舊可以拿出跨瀏覽器的方案來。IE中的event物件的全部資訊和方法DOM物件中都有,只不過實現方式不一樣。不過這種對應關係讓實現兩種事件模型之間的對映非常容易。可以對前面介紹的EventUtil物件加以增強,新增如下方法以求同存異。
var EventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener){//檢測是否存在DOM2級方法, element.addEventListener(type,handler,false);//如果存在DOM2級方法,傳入事件型別,事件處理程式,和第三個引數false(表示冒泡階段) }else if(element.attachEvent){ element.attachEvent("on" + type,handler);//如果存在的IE方法,為了在IE8以及更早的瀏覽器中執行,此類事件型別必須加上on字首 }else{ element["on" + type] = handler;//DOM0級方法(現代瀏覽器中,應該執行不到這裡的程式碼),此時使用的是方括號語法來將屬性名指定為事件處理程式,或者將屬性設定為null }//DOM0級對每個事件只支援一個事件處理程式。 }, 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(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on" + type,handler); }else{ element["on" + type] = null; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true } }, };