公共事件處理函式js庫

靜逸發表於2015-05-10
var EventUtil = {
            /*
            *新增事件處理 引數:元素物件 事件型別 處理函式
           */
            addHandle: function (element, type, handle) {
                //dom2級的事件新增
                if (element.addEventListener) {
                    element.addEventListener(type, handle, false);
                } else {
                    //IE 的事件新增
                    if (element.attachEvent) {
                        element.attachEvent('on' + type, handle);
                    } else {
                        //給元素特性賦值
                        element['on' + type] = handle;
                    }
                }

            },
            /*
            *移除事件處理 引數:元素物件 事件型別 處理函式
           */
            removeHandle: function (element, type, handle) {
                //dom2級的事件移除
                if (element.removeEventListener) {
                    element.removeEventListener(type, handle, false);
                } else {
                    //IE的事件移除
                    if (element.detachEvent) {
                        element.detachEvent('on' + type, handle);
                    } else {
                        //給元素特性賦值為空物件以移除事件
                        element['on' + type] = null;
                    }
                }
            },
            //獲得event物件 IE中以引數event物件傳入 Dom中通過window.event來訪問
            getEvent: function (event) {
                return event ? event : window.event;
            },
            //獲得事件的目標 dom中通過event.target獲得 IE中通過event.srcElement
            getTarget: function (event) {
                return event.target || event.srcElement;
            },
            //取消事件的預設行為
            preventDefault: function (event) {
                if (event.preventDefault) {
                    //Dom 方法
                    event.preventDefault();
                } else {
                    //設定IE event.returnValue = false
                    event.returnValue = false;
                }
            },
            //停止事件冒泡
            stopPropagation: function (event) {
                //Dom 方法
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;;
                }
            },
            //獲得相關目標物件
            getRelatedTarget: function (event) {
                //Dom 方法 relatedTarget只對mouseover和mouseout事件才包含值 否則 這個值為null
                if (event.relatedTarget) {
                    return event.relatedTarget;
                } else {
                    //IE
                    if (event.toElement) {
                        return event.toElement;
                    } else {
                        if (event.fromElement) {
                            return event.fromElement;
                        } else {
                            return null;
                        }
                    }
                }
            },
            //獲得滑鼠按鍵 0表示左鍵 1表示中間輪 2表示右鍵
            getButton: function (event) {
                //是否支援Dom滑鼠事件
                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.charCode == 'number') {
                    return event.charCode;
                } else {
                    return event.keyCode;
                }
            }
        };

 

相關文章