跨浏览器的事件对象

bingo 发布于2019-08-20 14:02 / 342人阅读

摘要：它们都接受三个参数要处理的事件名作为事件处理程序的函数和一个布尔值。如果是通过特性指定的事件处理程序，那么还可以通过一个名叫的变量来访问对象。对于和事件来说，在其对象存在一个属性，表示按下或释放的按钮。

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事件对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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