event事件句柄的封装

// 一段老生常谈的添加事件通用方法, 不过这样写更巧妙些
// 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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值