跨浏览器的事件处理

2018-11-08  本文已影响0人  自律财富自由

原文

var EventUtil = {
        // 添加侦听事件
        addEventListener:function (element, type, handler) {
            // IE9+、Firefox、Safari、chrome和Opera
            if(element.addEventListener) {
                element.addEventListener(type, handler, false);
            }
            // IE8-
            else if(element.attachEvent) {
                element.attachEvent("on" + type, handler);
            }
        },
        
        // 移除侦听事件
        removeEventListener:function (element, type, handler) {
            // IE9+、Firefox、Safari、chrome和Opera
            if(element.addEventListener) {
                element.removeEventListener(type, handler, false);
            }
            // IE8-
            else if(element.attachEvent) {
                element.detachEvent("on" + type, handler);
            }
        },
        
        // 获取事件对象
        getEvent:function(event) {
            if(typeof event == "undefined") {
                event = window.event; // IE浏览器
            }
            return event;
        },
        
        // 获取触发事件的元素
        getTarget:function(event){
            if(typeof event.srcElement == "undefined") {
                return event.target;
            }else {
                return event.srcElement; // IE浏览器
            }
        },
        
        // 获取事件类型
        getType:function(event) {
            return event.type;
        },
        
        // 获取按键键码
        getCharCode:function(event) {
            if(typeof event.keyCode == "number") {
                return event.keyCode; // IE8-、Firefox和opera
            }else {
                return event.charCode; 
            }
        },
        
        // 获取鼠标相对于文档的位置,即页面坐标位置
        getPagePosition:function(event) {
            var pageX = event.pageX,
                pageY = event.pageY;
            if(pageX == undefined) {
                pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
            }
            if(pageY == undefined) {
                pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
            }
            return {
                pageX:pageX,
                pageY:pageY
            };
        },
        
        // 阻止事件的默认行为
        preventDefault:function(event) {
            if(event.preventDefault){
                event.preventDefault();
            }else {
                event.returnValue = false; // IE浏览器
            }
        },
        
        // 阻止事件冒泡
        stopPropagation:function(event) {
            if(typeof event.cancelBubble == "undefined") {
                event.stopPropagation();
            }else {
                event.cancelBubble = true; // IE浏览器
            }
        }
    };
上一篇 下一篇

猜你喜欢

热点阅读