event事件句柄的封装

来源：互联网发布：刀路仿真软件编辑：程序博客网时间：2024/04/29 10:50

// 一段老生常谈的添加事件通用方法, 不过这样写更巧妙些// addEvent会初始化为适合当前浏览器的方法// 不用每次都判断, 而且对IE中eventHandler的调用做了小小的改进// 让eventHandler的执行context为触发事件的元素var addEvent = (function() {    if(document.addEventListener) {        return function(el, type, fn) {            if(el && el.nodeName || el === window) {                el.addEventListener(type, fn, false);            } else if (el && el.length) {                for(var i = 0; i < el.length; i++) {                    addEvent(el[i], type, fn);                }            }        };    } else {        return function(el, type, fn) {            if(el && el.nodeName || el === window) {                el.attachEvent('on' + type, function() {                    return fn.call(el, window.event);                });            } else if (el && el.length) {                for(var i = 0; i < el.length; i++) {                    addEvent(el[i], type, fn);                }            }        };    }})();

    var eventUtil = {    //事件传播      /*         当事件目标是Window对象或其他一些单独对象时，浏览器简单地通过调用对象上适当的处理程序响应事件，         当目标对象是文档或文档元素时，大部分事件都会“冒泡”到DOM树根，调用目标的父元素的事件处理程序，然后调用在目标祖父元素上注册的事件处理程序，一直到Domcument对象上，最后到达Window对象。          注意：focus blur scroll事件除外其它的大部分事件都会冒泡     */                         addHandler: function (element, type, handler) {                            if (element.addEventListener) {                                element.addEventListener(type, handler, false);                            }                            else if (element.attachEvent) {                                element.attachEvent('on' + type, handler);                                //attachEvent 'this'指向 'window'                            }                            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;                        },                        getType: function (event) {                            return event.type;                        },                        getTarget: function (event) {                            return event.target || event.srcElement;                        },                        preventDefault: function (event) {                            if(event.preventDefault) {                                event.preventDefault();                            }else{                                event.returnValue = true;                            }                        },                        stopPropagation: function (event) {                            if(event.stopPropagation) {                                event.stopPropagation();                            }else {                                event.cancelBubble = true;                            }                        },                        //相关元素只有mouseover和mouseout才有                        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;                            }                        },                        //获取鼠标按钮                        getMouseButton: 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;                                }                            }                        },                        //查询滚轮方向,向下为负，向上为正 每次滚动120                        getWheelDelta: function (event) {                            if(event.wheelDelta) {                                //针对除firefox以外的浏览器，事件为mousewheel                                return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);;                            }else{                                return -event.detail*40;//针对firefox，事件为DomMouseScroll                            }                        },                        //获取按下键盘值的字符编码                        getCharCode: function (event) {                            if (typeof event.charCode === 'number') {                                return event.charCode;                            } else {                                return event.keyCode;                            }                        },                        getClipboardText: function(event){                            var clipboardData =  (event.clipboardData || window.clipboardData);                            return clipboardData.getData("text");                        },                        setClipboardText: function(event, value){                            if (event.clipboardData){                                event.clipboardData.setData("text/plain", value);                            } else if (window.clipboardData){                                window.clipboardData.setData("text", value);                            }                        },                    };

1 0