javascript高级程序设计---事件类eventUntil

var eventUntil = {
    /**
     * 兼容IE和其他浏览器的事件添加方法,
     * @param {[object]} element [元素对象]
     * @param {[string]} type    [事件类型 click等]
     * @param {[function]} handler [操作函数]
     */
    addHandler: function(element, type, handler) {
        // 标准方法
        if (element.addEventListener) {
            // false表示冒泡
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            // Dom0级事件
            element['on' + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            // Dom0级移除事件
            element['on' + type] == null;
        }
    },
    // 获取事件IE和w3c的不同
    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 {
            // IE阻止默认行为
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            // IE取消冒泡
            event.cancelBubble = true;
        }
    },
    // 已经兼容了IE8和以下浏览器
    getPageX: function(event) {
        var pagex = 0;

        if (event.pageX === undefined) {
            pagex = event.clientX +
                (document.documentElement.scrollLeft || document.body.scrollLeft);

        } else {
            pagex = event.pageX;
        }
        return pagex;

    },
    getPageY: function(event) {
        var pagey = 0;
        if (event.pageY === undefined) {
            pagey = event.clientY +
                (document.documentElement.scrollTop || document.body.scrollTop);
        } else {
            pagey = event.pageY;
        }
        return pagey;
    },
    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) {
        // IE和其他浏览器都有button属性
        if (document.implementation.hasFeature('MouseEvent', '2.0')) {
            // 0,1,2分别是左中右鼠标键
            return event.button;
        } 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;

            }
        }
    },
    getWheelDelta: function(event) {
        // 向上滚蛋为+120,向下滚动为-120
        if (event.wheelDelta) {
            // IE和其他浏览器支持mousewheel事件
            return (client.engine.opera && client.engine.opera < 9.5) ? -event.wheelDelta : event.wheelDelta;
        } else {
            // 火狐支持一个DOMMouseScroll事件
            return -event.detail * 40;
        }
    },
    getCharCode: function(event) {
        if (typeof event.charCode == 'number') {
            return event.charCode;
        } else {
            return event.keyCode;
        }
    }
};


//实例

document.onclick = function(event) {
    var e = eventUntil.getEvent(event);
    alert(eventUntil.getPageX(event) + ' ' + eventUntil.getPageY(event));
}
var mouse = document.getElementById('mouseover');
eventUntil.addHandler(mouse, 'mouseover', function(event) {
    var event = eventUntil.getEvent(event);
    var related = eventUntil.getRelatedTarget(event);
    alert(related);
});

eventUntil.addHandler(mouse, 'mouseout', function(event) {
    var event = eventUntil.getEvent(event);
    var related = eventUntil.getRelatedTarget(event);
    alert(related);
});

eventUntil.addHandler(document, 'click', function(event) {
    var event = eventUntil.getEvent(event);
    var btnValue = eventUntil.getButton(event);
    eventUntil.preventDefault(event);
    switch (btnValue) {
        case 0:
            alert('左键');
            break;
        case 1:
            alert('中键');
            break;
        case 2:
            alert('右键');
            break;
    }
});
eventUntil.addHandler(document, 'mousewheel', function(event) {
    var event = eventUntil.getEvent(event);
    alert(event.wheelDelta);
});

eventUntil.addHandler(window, 'DOMMouseScroll', function(event) {
    var event = eventUntil.getEvent(event);
    var detail = eventUntil.getWheelDelta(event);
    alert(detail);
});

eventUntil.addHandler(document.getElementById('keypress'), 'keypress', function(event) {
    var event = eventUntil.getEvent(event);
    var charcode = eventUntil.getCharCode(event);
    alert(charcode);
});

eventUntil.addHandler(window, 'scroll', function(event) {
    // 表示标准模式
    if (document.compatMode == 'CSS1Compat') {
        document.documentElement.scrollTop = '200';
    } else {
        alert(document.body.scrollLeft);
    }

});


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值