跨瀏覽器的事件對象

bingo 發布于2019-08-20 14:02 / 381人閱讀

摘要：它們都接受三個參數要處理的事件名作為事件處理程序的函數和一個布爾值。如果是通過特性指定的事件處理程序，那么還可以通過一個名叫的變量來訪問對象。對于和事件來說，在其對象存在一個屬性，表示按下或釋放的按鈕。

DOM2級事件處理程序:

DOM2級事件處理程序定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventLisener()。
它們都接受三個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。

IE事件處理程序

IE實現了DOM中類似的兩個方法：attachEvent()和detachEvent()。
這兩個方法接受相同的兩個參數：事件處理程序名稱與事件處理程序函數。由于IE8及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。

getEvent：

event || window.event
1.DOM
兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。
2.IE
在使用DOM0級方法添加事件處理程序時，event對象最為window對象的一個屬性存在，用window.event取得evnet對象。
如果事件處理程序是用attachEvent()添加的，那么就會有一個event對象作為參數被傳入程序函數中。
如果是通過HTML特性指定的事件處理程序，那么還可以通過一個名叫event的變量來訪問event對象。

getTarget：

event.target || event.srcElement
1.DOM
target包含事件的實際目標。
2.IE
因為事件處理程序的作用域是根據指定它的方式來確定的，所以this不一定會始終等于事件目標。因而，最好還是使用event.srcElement比較保險。

preventDefault：

1.DOM
preventDefault()取消事件的默認行為
2.IE
returnValue屬性相當于DOM中的preventDefault()方法，他們的作用都是取消給定事件的默認行為。只要將returnValue設置為false，就可以阻止默認行為。

stopProgagation：

1.DOM
stopProgagation()取消事件的進一步捕獲或冒泡
2.IE
cancelBubble屬性與DOM中的stopPropagation()方法作用相同，都是用來停止事件冒泡的。

getRelatedTarget

mouseover：事件的主目標是獲得光標的元素，而相關元素是失去光標的元素。
mouserout：事件的主目標是失去光標的元素，而相關元素是獲得光標的元素。
1.DOM
DOM通過event對象的relateTarget屬性提供了相關元素的信息
2.IE
IE8及之前的版本不支持getRelatedTarget屬性。
但在mouseover事件觸發時，IE的fromElement屬性中保存了相關元素
在mouseout事件觸發時，IE的toElement屬性中保存了相關元素。

getButton

對于mousedown和mouseup事件來說，在其event對象存在一個button屬性，表示按下或釋放的按鈕。
1.DOM
DOM的button屬性有3個，
0表示主鼠標鍵
1表示總監的鼠標按鈕（鼠標滾輪按鈕）
2表示次鼠標按鈕
2.IE
IE8之前變笨也提供了button屬性，但這個屬性的值和DOM有很大的差異
0：表示沒有按下按鈕
1：表示按下了主鼠標按鈕
2：表示按下了次鼠標按鈕
3：表示同時按下了主、次鼠標按鈕
4：表示按下了中間的鼠標按鈕
5：表示同時按下了主鼠標按鈕和中間的鼠標按鈕
6：表示同時按下了次鼠標按鈕和中間的鼠標按鈕
7：表示同時按下了三個鼠標按鈕

getCharCode

鍵碼：
在發生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode屬性的值與ASCII碼中對應小寫字母或數字的編碼相同。
字符編碼：
charCode屬性只有在發生keypress事件時才包含值。
代碼如下:

EventUtil = {
    addHandler: function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type] = handler;
        }
    },
    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;
        }
    },
    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;
        }
    },
    stopProgagation: function(event){
        if(event.stopProgagation){
            event.stopProgagation();
        }else{
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event){
        if(event.relatedTarget){
            return event.relatedTarget;
        }else if(event.toElement){
            return event.toElement;
        }else if(event.fromElement){
            return event.fromElement;
        }else{
            return null;
        }
    },
    getButton:function(event){
        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;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },
    getCharCode: function(event){
        if(typeof event.charCode == "number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    }
};

GPU云服務器云服務器 Web跨瀏覽器 js 跨瀏覽器存儲事件對象 IE事件對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81379.html

Event Handler 事件處理程序 2 ---跨瀏覽器事件對象《高程3》

摘要：一旦事件處理程序執行完成，對象就會被銷毀。所有瀏覽器對的支持方式包括事件對象和事件對象。無論指定事件處理程序時使用什么方法級或級，都會傳入對象。由于不支持事件捕獲，因而只能取消事件冒泡但可以同時取消事件捕獲和冒泡。 0 Event Object導論支持DOM0、DOM2的瀏覽器和IE瀏覽器實現事件處理程序的不同，除了體現在添加事件處理程序的不同上，還體現在event對象的實現差異上，...

qpal 2019-08-20 11:31 評論0 收藏0
Event Handler 事件處理程序 2 ---跨瀏覽器事件對象《高程3》

摘要：一旦事件處理程序執行完成，對象就會被銷毀。所有瀏覽器對的支持方式包括事件對象和事件對象。無論指定事件處理程序時使用什么方法級或級，都會傳入對象。由于不支持事件捕獲，因而只能取消事件冒泡但可以同時取消事件捕獲和冒泡。 0 Event Object導論支持DOM0、DOM2的瀏覽器和IE瀏覽器實現事件處理程序的不同，除了體現在添加事件處理程序的不同上，還體現在event對象的實現差異上，...

roadtogeek 2019-08-01 15:49 評論0 收藏0
javaScript跨瀏覽器事件處理程序

摘要：在事件處理，事件對象，阻止事件的傳播等方法或對象存在著瀏覽器兼容性問題，開發過程中最好編寫成一個通用的事件處理工具。上面的中事件的執行都發生了目標階段事件對象的屬性用來表示事件處理發生在事件流哪個階段。最近在閱讀javascript高級程序設計，事件這一塊還是有很多東西要學的，就把一些思考和總結記錄下。在事件處理，事件對象，阻止事件的傳播等方法或對象存在著瀏覽器兼容性問題，開發過程中...

terasum 2019-08-21 10:38 評論0 收藏0
跨瀏覽器的事件處理程序實現總結

摘要：本文章需要一些前置知識事件基礎知識對象詳解圍繞著如何更好地實現一個跨瀏覽器的事件處理小型庫展開討論。處理垃圾回收過濾觸發或刪除一些處理程序解綁特定類型的所有事件克隆事件處理程序依照這樣的一個思路，我們來一步步實現這樣一個模塊。本文章需要一些前置知識事件基礎知識 event對象詳解圍繞著如何更好地實現一個跨瀏覽器的事件處理小型庫展開討論。 1. 初步實現在《JavaScrip...

CHENGKANG 2019-08-22 10:47 評論0 收藏0
跨瀏覽器的事件代理

摘要：假設我們有這樣的一段我們想要實現一個效果，點擊的時候，彈出此內的文字。我們采用代理的方式，利用時間的冒泡把事件綁定到上，而不是每一個上面我們知道，在主流的瀏覽器里面綁定事件處理程序和解綁分別是: 綁定：addEventListener(eventType, handler, useCapture); 解綁：removeEventListener(eventType, handler,...

el09xccxy 2019-08-20 17:32 評論0 收藏0