JavaScript事件_待整理

var EventUtil = {
    //注册事件
    addHandler: function(element,type, handler) {
    //element:对象；type：事件类型；listener：函数
    
        if(element.addEventListener){  
            element.addEventListener(type, handler, false); //firefox  
        }else if (element.attachEvent){  
            element.attachEvent("on"+type, handler); //ie  
        }else{
            element["on" + type] = handler;
        }
    },
    //移除事件
    removeHandler: function(element,type, handler){
        //element:对象；type：事件类型；listener：函数
        
        if(element.removeEventListener){  
            element.removeEventListener(type, handler, false); //firefox  
        }else if(element.detachEvent){  
            element.detachEvent("on"+type, handler); //ie  
        }else{
            element["on" + type] = null;
        }
    },

    //获取事件
    getEvent: function(event){
        return event || window.event;
    },
    //获取事件名称
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    //取消时间的默认行为，如果cancelable是true，则可以使用这个方法；
    //如:点击超链接时阻止其访问herf属性实现跳转
    preventDefault: function(event) {
        if(event.preventDefault){//firefox
            event.preventDefault();
        }else{//ie
            event.returnValue = false;
        }
    },
    //取消事件的进一步捕获或冒泡。如果bubbles为true则可以使用这个方法；
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    /*event对象的relatedTarget属性提供了相关元素的信息，这个属性只对于mouseover和mouseout事件才包含值；
    *对于其他事件，这个属性的值是null。
    *IE不支持relatedTarget属性，但提供了保存着同样信息的不同属性。
    *在mouseover事件触发时，IE的fromElement属性中保存率相关元素；
    *在mouseout事件触发时，IE的toElement属性中保存着相关元素。
    */
    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;
    },

        /*由于单独使用能力检测无法确定浏览器的差异（两种模型的浏览器都具有button属性），因此必须另辟蹊径。
     *我们知道，支持DOM办鼠标事件的浏览器可以通过hasFearture()方法来检测，所以可以再为EventUtil对象添加方法getButton()
     */
    getButton: function(event){
        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;
            }
        }
    },

    //获得按键编码值
    getCharCode: function(event){
        if(typeof event.chanrCode == "number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    }

};

window.onload = function(){

    //var node = document.getElementById("myul");
    // var oEvent = new EventUtil.slider();
    var element = document.getElementById("testE");

    //1.点击事件
    var eventClick = function (event) {//点击事件
        event = EventUtil.getEvent(event);//取得兼容个浏览器的event对象；

        console.log("Client coordinates: "+event.clientX+"; "+event.clientY);//得到客户区鼠标坐标位置
        console.log("Screen coordinates: "+event.screenX+"; "+event.screenY);//得到鼠标事件发生时相对于整个电脑屏幕的位置
    };
    //EventUtil.addHandler(element,"click",eventClick);//注册点击事件

    //2.修改键
    /*
     *虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标是键盘上的某些键的状态也可以影响到所要采取的操作。
     *这些修盖键就是：Shift、Ctrl、Alt和Meta（在Windows键盘中是Windows键，在Mac中时Cmd键），他们经常被用来修改鼠标事件的行为。
     *DOM为此规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey和metaKey。
     *这些属性中包含的都是布尔值，如果相应的键被按下，则值为true，否则值为false。
     *当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。
    **/
    var eventKey = function(event){
        event = EventUtil.getEvent(event);

        var keys = [];
        if(event.shiftKey) keys.push("shift");
        if(event.ctrlKey) keys.push("ctrl");
        if(event.altKey) keys.push("alt");
        if(event.metaKey) keys.push("meta");

        console.log("Keys : "+keys.join(","))
    }
    //EventUtil.addHandler(element,"click",eventKey);

    //3.相关元素，当鼠标从element元素移开，进入到另一个页面元素中时，这个页面元素就是相关元素
    var eventRelatedTarget = function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        var relatedTarget = EventUtil.getRelatedTarget(event);

        console.log("Mouse out of " + target.tagName + " to " + relatedTarget.tagName);
    }
    //EventUtil.addHandler(element,"mouseout",eventRelatedTarget);

    //4.鼠标按钮
    /*
     *只有在住鼠标按钮被单击是才会触发click事件，因此检测按钮的信息并不是必要的。
     *但对于mousedown和mouseup事件来说，则在其event对象存在一个button属性，表示按下或释放的按钮。
     *DOM的button属性可能有如下三个值：0-主鼠标，1-滚轮，2-次鼠标。
     *IE也提供了button属性，但这个属性的值与DOM的button属性有很大差异。
     *IE中：0-表示没有按下按钮，1-按下了主鼠标按钮，2-表示按下了次鼠标按钮，3-表示同时按下了主、次鼠标按钮，
     *        4-表示按下了中间的鼠标按钮（滚轮），5-表示同时按下了主鼠标和中间的鼠l标按钮，
     *        6-表示同时按下了次鼠标和中间的鼠标按钮，7-表示同时按下了主、次和中间的鼠标按钮。
    **/
    var eventButton = function(event){
        event = EventUtil.getEvent(event);
        console.log("你当前按下的鼠标编码是："+EventUtil.getButton(event));
    }
    //EventUtil.addHandler(element,"mousedown",eventButton);
    //5.键盘事件
    /*
     *3个键盘事件：keydown-当用户按下键盘上的任意键时触发，而且如果按住不放的话会重复触发此事件。
                    keypress-当用户按下键盘上的字符键时触发，而且如果按住不放的话会重复触发此事件。
                    keyup-当用户释放键盘上的键时触发。
     *这三个事件的触发顺序：当用户按下键盘上的字符键的时候，首先触发keydown事件，然后是keypress事件，最后触发keyup。
                    其中，keydown和keypress都是在文本框发生变化之前被触发的；而keyup事件则是在文本框已经发生变化之后被触发的。
     */
    var myText = document.getElementById("myText");
    var docu = document;
    var eventKey = function(event){
        event = EventUtil.getEvent(event);
        console.log("你当前按下的键位编码是："+EventUtil.getCharCode(event));
    }
    EventUtil.addHandler(docu,"keyup",eventKey);

};