原生JavaScript事件处理程序汇总

• 事件处理程序

  1. 添加事件
  2. 获取事件对象引用
  3. 获取事件的目标
  4. 取消给定事件默认行为 DOM0级，IE中
  5. 删除事件
  6. 停止事件冒泡
  7. 获取相关元素
  8. 获取鼠标按钮信息
  9. 获取鼠标滚轮增量值（delta）的方法
  10. 获取键

吐槽下segmentfault的markdown语法目前不支持页面锚点定位

事件处理程序

添加事件

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级事件处理程序
        }
    },

获取事件对象引用

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

获取事件的目标

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

取消给定事件默认行为 DOM0级，IE中

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

删除事件

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

停止事件冒泡

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

获取相关元素

这个属性只对于mouseover和mouseout事件才包含值；
对于其他事件，这个属性值是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;
        }
    },  

获取鼠标按钮信息

{ 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;
            }
        }
    },

获取鼠标滚轮增量值（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;
        }
    },

获取键

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

}

发表在掘金的链接