原生JS事件处理程序

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

事件处理程序

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.获取相关元素

这个属性只对于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;
            }
        }, 
复制代码

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