原生JavaScript事件處理程序彙總

時間 2019-11-10

標籤原生 javascript 事件處理程序彙總欄目 JavaScript 简体版

原文原文鏈接

事件處理程序segmentfault

吐槽下 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;
        }
    }

發表在掘金的連接markdown