封装常用的跨浏览器的事件对象EventUtil

16868次浏览

前言

今天主要讲解一个常用的js封装的事件方法!很常用,因此在博客中写一下!前面讲了jquery属性的相关js实现方法,假如我们在项目中,不用jquery,那么这个事件一般我们都会用到!其次,今天我会讲讲一些表单知识,很简单,但是可能有些不常用的,就会不是很了解!

跨浏览器的事件对象EventUtil

闲话少说,下面我就把这个事件对象列出来!

var EventUtil = {
    addHandler: function(element,type,handler) { //事件监听
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }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) {//获取event对象,返回event对象的引用
        return event ? event : window.event;
    },
    getTarget: function(event) {//返回事件目标。
        return event.target || event.srcElement;
    },
    preventDefault: function(event){//取消或者阻止事件默认行为
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {//阻止事件流,阻止事件冒泡
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event){//返回相关元素信息(仅对于mouseover和mouseout事件)
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
    getWheelDelta: function(event) {//获取鼠标滚轮增量值,检测是否包含WheelDelta
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {//获取键盘按键键码。
        if(typeof event.charCode == 'number') {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    },
    getButton:function(event){//在mouseup或者mousedown的时候,event存在一个button属性,用于判断是按了鼠标左键,右键,还是中键,0鼠标主键按钮,1是中间,2是次键(右键)
        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;

            }
        }

    }
};

上面就是我们封装的事件对象。

用法超级简单,例如click事件

var btn1 = document.getElementById("myBtn1");
var handler = function(){
alert("hello haorooms");
}

EventUtil.addHandler(btn1, "click", handler);
//EventUtil.removeHandler(btn1, "click", handler);

Tags: EventUtiljs

相关文章: