跨浏览器的事宜对象

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;
        }
    }
};
    原文作者:lhm_582082005a5e6
    原文地址: https://segmentfault.com/a/1190000008238779
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞