原生JS事件处理程序

619 阅读1分钟

事件处理程序

1.添加事件

 var EventUtil = {
        addEvent: function(element, type, handler){
            if(element.addEventListener){
                element.addEventListener(type, handler, false);//DOM2级事件处理程序
            }else if(element.attachEvent){
                element.attach('on' + type, handler);//IE事件处理程序
            }else{
                element['on' + type] = handler;//DOM0级事件处理程序
            }
        },

2.获取事件对象引用

        getEvent: function(event){
            // return event || window.event;
            return event ? event : window.event;
        },  

3.获取事件的目标

        getTarget: function(event){
            return event.target || event.srcElement;
        },

4.取消给定事件默认行为 DOM0级,IE中

        preventDefault: function(event){
            if (event.preventDefault){
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },

5.删除事件

        removeEvent: 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;
            }
        },

6.停止事件冒泡

        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        },

7.获取相关元素

这个属性只对于mouseovermouseout事件才包含值; 对于其他事件,这个属性值是null;

        getRelatedTarget: function(e){
            if(e.relatedTarget){
                return e.relatedTarget;
            } else if(e.toElement){
                return e.toElement;
            } else if(e.fromElement){
                return e.fromElement;
            } else {
                return null;
            }
        }, 

8.获取鼠标按钮信息

0:主鼠标按钮,1:中间的鼠标按钮(滚轮按钮),2:次鼠标按钮

        getMouseButton: function(event){
            if(document.implementation.hasFeature("MouseEvents", '2.0')){
                return event.button;
            } else {
                // IE8及之前版本的button属性,转换为DOM版鼠标事件的button属性
                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;
                }
            }
        },

9.获取鼠标滚轮增量值(delta)的方法

        getWheelDelta: function(event){
            if(event.wheelDelta){
                return (client.engine.opera && client.engine.opera < 9.5) ?
                    -event.wheelDelta : event.wheelDelta;
            } else {
                return -event.detail * 40;
            }
        },

10.获取键码

        getCharCode: function(event){
            if(typeof event.charCode == 'number'){
                return event.charCode;
            } else {
                return event.keyCode;
            }
        }
}

原生JS事件处理程序