跨瀏覽器的事件對象

雖然DOM和IE中的event對象不同,但基于他們之間相似依舊可以拿出跨瀏覽器方案來。

var EventUtil = {
      addHandler: 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(ele,type,handler){
      },
      stopPropagation: function(event){
            if(event.stopPropagation){
                  event.stopPropagation();
            } else {
                  event.cancelBubble = true;
            }
      }
};

以上代碼顯示,我們?yōu)镋ventUtil添加了4個新的方法。第一個是getEvent(),它返回的是event對象的引用。考慮到IE重實踐對象的位置不同,可以使用這個方法來取得event對象,而不必擔心指定事件處理程序的方式。在使用這個方法時,必須假設有一個事件對象傳入到時間處理程序中,而且把該變量傳給這個方法,如下所示。

btn.onclick = function(event){
      event = EventUtil.getEvent(event);
}

在兼容DOM的瀏覽器中。event變量只是簡單的傳入和傳回。而在IE中event參數(shù)是未定義的(undefined),因此就會返回window.event。將這一行代碼添加到事件處理程序的開頭,就可以確保隨時都能使用event對象,而不必擔心用戶使用的是什么瀏覽器。
第二個方法時getTarget(),他返回的是事件目標。在這個方法內部,會檢測event對象的target屬性,如果存在返回該屬性的值,否則,返回srcElement屬性的值??梢韵裣旅孢@樣使用這個方法。

btn.onclick = function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
}

第三個方法是preventDefault(),用于取消事件的默認行為。在傳入event對象后,這個方法會檢查是否存在preventDefault()方法,如果存在調用該方法。如果preventDefault()方法不存在,則將returnValue設置為false。下面是這個方法的例子。

var link = document.getElementById("myLink");
link.onclick = function(event){
      event = EventUtil.getEvent(event);
       EventUtil.preventDefault(event);
};

以上代碼可以確保在所有瀏覽器中單擊該鏈接都不會打開另一個頁面。首先,使用EventUtil.getEvent()取得event對象,然后將其傳入EventUtil.preventDefault()以取消默認行為。

第四個方法是stopPropagation(),其實現(xiàn)方式類似。首先嘗試使用DOM方法阻止事件流,否則就是用cancelBubble屬性。下面看一個例子。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert("Click");
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
};
document.body.onclick = function(event){
    alert("Body Click");
};

再次,首先使用EventUtil.getEvent()取得了event對象,然后將其傳入到EventUtil.stopPropagation()。別忘了由于IE不支持時間不活,因此這個方法在跨瀏覽器的情況下,也只能用來組織事件冒泡。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • JavaScript 程序采用了異步事件驅動編程模型。在這種程序設計風格下,當文檔、瀏覽器、元素或與之相關的對象發(fā)...
    劼哥stone閱讀 1,333評論 3 11
  • 由于ie和其它瀏覽器的區(qū)別,在對DOM進行事件注冊的和使用event對象的時候,需要一種快捷的封裝好的工具方法。 ...
    whiterum閱讀 293評論 0 0
  • 設置EventUtil對象來處理瀏覽器間的差異 addHandler()方法接受3個參數(shù):要操作的元素、事件名稱和...
    wanpan__閱讀 388評論 0 0
  • 以下文章為轉載,對理解JavaScript中的事件處理機制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,173評論 1 10
  • 翻譯自10 C99 tricks 10個C語言小竅門,原文提到是適用C99,其實部分技巧也適用于C89。MSVC沒...
    咕咕鷄閱讀 1,073評論 0 1

友情鏈接更多精彩內容