javascript跨浏览器事件对象类库

一、前言

学习了javascript事件后，个人总结归纳了跨浏览器事件对象类库，方便以后使用，现分享给大家。

二、事件对象封装

将对浏览器事件对象的操作封装成eventObject.js方便调用

 

//跨浏览器事件对象的操作

var EventUtil = {

    //绑定事件处理程序

    addHandler : function(element, type, handler){

        if(element.addEventListener){//DOM2级事件处理程序

            element.addEventListener(type, handler, false);//false表示的是冒泡阶段调用事件处理程序

        }else if(element.attachEvent){//IE事件处理程序

            element.attachEvent('on' + type, handler);

        }else {//DOM0级事件处理程序

            element['on' + type] = handler;

        }

    },

    //取消绑定的事件处理程序

    removeHandler : function(element, type, handler){

        if(element.removeEventListener){

            element.removeEventListener(type, handler, false);

        }else if(element.detachEvent){

            element.datachEvent('on' + type, handler);

        }else {

            element['on' + type] = null;

        }

    },

    //获取事件对象

    getEvent : function(event){

        return event || window.event;

    },

    //获取目标元素对象

    getTarget : function(event){

        return event.target || event.srcElement;//event.target表示获取非IE元素对象，event.srcElement表示获取IE元素对象

    },

    //阻止事件的默认行为

    preventDefault : function(event){

        if(event.preventDefault){//非IE下阻止事件的默认行为

            event.preventDefault();

        }else {

            event.returnValue = false;//IE下阻止事件的默认行为

        }

    },

    //阻止事件的冒泡

    stopPropagation : function(event){

        if(event.stopPropagation){//非IE下阻止事件冒泡

            event.stopPropagation();

        }else {

            event.cancelBubble = true;//IE下阻止事件冒泡

        }

    },

    //获取鼠标按下的键位

    getButton : function(event){

        if(document.implementation.hasFeature("MouseEvents", "2.0")){//DOM2中检测是否有MouseEvents模块

            return event.button;

            // var k = event.button;

            //     switch(k){

            //         case 0:

            //             return "0:表示左键";

            //         case 1:

            //             return "1:表示中键";

            //         case 2:

            //             return "2:表示右键";

            //     }

            //IE6,7,8  左键:1,中键:4,右键:2;

            //Chrome,FF,IE9+   左键:0,中键:1,右键:2;

        }else {

            switch(event.button){//IE

                case 0 :

                case 1 :

                case 3 :

                case 5 :

                case 7 :

                    return 0;//左键

                case 2 :

                case 6 :

                    return 2;//右键

                case 4 :

                    return 1;//中键

            }

        }

    },

    //鼠标移入移出时获取相关元素对象

    /*event对象的relatedTarget属性提供了相关元素的信息，这个属性只对于mouseover和mouseout事件才包含值；

    *对于其他事件，这个属性的值是null。

    *IE不支持relatedTarget属性，但提供了保存着同样信息的不同属性。

    *在mouseover事件触发时，IE的fromElement属性中保存相关元素；

    *在mouseout事件触发时，IE的toElement属性中保存相关元素。

    */

    getRelatedTarget : function(event){

        if(event.relatedTarget){

            return event.relatedTarget;

        }else if(event.toElement){//mouseout事件触发

            return event.toElement;

        }else if(event.fromElement){//mouseover事件触发

            return event.fromElement;

        }else {

            return null;

        }

    }

};

三、总结

此类库参考了《JavaScript高级程序设计 第3版》相关内容，如果各位有更好的有关事件对象操作的类库，希望能分享交流。

文中有误导大家的地方，希望大伙海涵并给予指正。如果您觉得文章对您有所帮助，您的留言和推荐将对我是莫大的鼓舞！

如需转载本文，请注明来源： http://www.cnblogs.com/changjianqiu/