javascript控件开发教程 可见控件(2)

发布时间:2019-08-18编辑:脚本学堂
经过上一篇(javascript控件开发教程 可见控件(1)),开始了可见控件的实现,考虑控件会用到键盘及鼠标,因此在上一篇控件基础上,再添加事件的处理,添加函数_sysEvent及_clearEvent。

经过上一篇(javascript控件开发教程 可见控件(1)),开始了可见控件的实现,考虑控件会用到键盘及鼠标,因此在上一篇控件基础上,再添加事件的处理,添加函数_sysEvent及_clearEvent。
 

复制代码 代码示例:
/**
 * 系统事件.
 */ 
   _sysEvent:function(){ 
    var _this = this; 
    /**
     * 事件列表
     */ 
    this._eventList = { 
           mouseup:function(ev) { 
            var ev = ev || window.event; 
            _this._docMouseUp(ev); 
        }, 
        mousedown:function(ev) { 
            var ev = ev || window.event; 
            _this._docMouseDown(ev); 
        }, 
        mousemove:function(ev) { 
            var ev = ev || window.event; 
            _this._docMouseMove(ev); 
        }, 
        keyup:function(ev) { 
            var ev = ev || window.event; 
            return _this._docKeyUp(ev); 
        }, 
        keydown:function(ev) { 
            var ev = ev || window.event; 
            return _this._docKeyDown(ev); 
        }, 
        mousewheel:function(ev) { 
            var ev = ev || window.event; 
            var re = _this._docMouseWheel(ev); 
            if(re) { 
                    evt = ev || window.event;      
                if(evt.preventDefault) {      
                    // Firefox        
                    evt.preventDefault();        
                    evt.stopPropagation();      
                } else {        
                    // IE        
                    evt.cancelBubble=true;        
                    evt.returnValue = false; 
                } 
                return false 
            } 
            return true; 
        } 
    }; 
    if (window.addEventListener) { 
           // 其它浏览器的事件代码: Mozilla, Netscape, Firefox 
           // 添加的事件的顺序即执行顺序 
           // 注意用 addEventListener 添加带on的事件,不用加on 
           document.addEventListener("mousedown",  
               this._eventList.mousedown, false); 
           document.addEventListener("mouseup",  
               this._eventList.mouseup, false); 
           document.addEventListener("mousemove",  
               this._eventList.mousemove, false); 
           document.addEventListener("keydown",  
               this._eventList.keydown, false); 
           document.addEventListener("keyup",  
               this._eventList.keyup, false); 
           document.addEventListener('DOMMouseScroll', 
               this._eventList.mousewheel,false); 
           //chrome 
           document.addEventListener('mousewheel', 
               this._eventList.mousewheel,false);  
       } else { 
           // IE 的事件代码 在原先事件上添加 add 方法 
           document.attachEvent("onmousedown", this._eventList.mousedown);  
           document.attachEvent("onmouseup", this._eventList.mouseup); 
           document.attachEvent("onmousemove", this._eventList.mousemove); 
           document.attachEvent("onkeydown", this._eventList.keydown); 
           document.attachEvent("onkeyup", this._eventList.keyup); 
           document.attachEvent("onmousewheel", this._eventList.mousewheel); 
       }         
   }, 
   /**
    * 清除系统事件.
    */        
clearEvent:function() { 
    if (window.removeEventListener) { 
           // 其它浏览器的事件代码: Mozilla, Netscape, Firefox 
           // 添加的事件的顺序即执行顺序 
           // 注意用 addEventListener 添加带on的事件,不用加on 
           document.removeEventListener("mousedown", 
               this._eventList.mousedown, false); 
           document.removeEventListener("mouseup",  
               this._eventList.mouseup, false); 
           document.removeEventListener("mousemove",  
               this._eventList.mousemove, false); 
           document.removeEventListener("keydown",  
               this._eventList.keydown, false); 
           document.removeEventListener("keyup",  
               this._eventList.keyup, false); 
           document.removeEventListener('DOMMouseScroll', 
               this._eventList.mousewheel,false); 
           document.removeEventListener('mousewheel', 
               this._eventList.mousewheel,false);  
       } else { 
           // IE 的事件代码 在原先事件上添加 add 方法              
           document.detachEvent("onmousedown", this._eventList.mousedown);  
           document.detachEvent("onmouseup", this._eventList.mouseup); 
           document.detachEvent("onmousemove", this._eventList.mousemove);  
           document.detachEvent("onkeydown", this._eventList.keydown); 
           document.detachEvent("onkeyup", this._eventList.keyup); 
           document.detachEvent("onmousewheel", this._eventList.mousewheel); 
       } 
   }, 

把事件都绑定到document,这里绑定了mousedown, mouseup, mousemove, mousewheel, keydown, keyup几个事件,为了继承方便,添加了对应的_doc开头的事件来转调do开头的方法,用于子类的重写,
 

复制代码 代码示例:
/**
 * 鼠标按下.
 * @param ev 事件对象
 */ 
_docMouseDown:function(ev) { 
       if(this.hasSelect || this.focus) { 
           this.doMouseDown(ev); 
           this.hasSelect = false; 
       } 
}, 
/**
 * 鼠标弹起.
 * @param ev 事件对象
 */ 
_docMouseUp:function(ev) { 
       if(this.hasSelect || this.focus) { 
           if(this.hasSelect) { 
            //牌选择状态 
            if(!this.focus) { 
                this.focus = true; 
                //处理焦点事件 
                this.doFocus(ev); 
            } 
           } else { 
            //没有选择状态 
            if(this.focus) { 
                this.focus = false; 
                //失去焦点事件 
                this.doBlur(ev); 
            } 
           } 
           this.doMouseUp(ev); 
           //this.logInfo("doc mouse up!"); 
           this.hasSelect = false; 
       } 
}, 
/**
 * 鼠标移动.
 * @param ev 事件对象
 */ 
_docMouseMove:function(ev) { 
    if(this.hasSelect || this.focus) { 
        this.doMouseMove(ev); 
        this.hasSelect = false; 
    }            
}, 
/**
 * 键盘弹起.
 * @param ev 事件对象
 */ 
_docKeyUp:function(ev) { 
    if(this.focus) { 
        var key = ev.keyCode || ev.charCode || ev.which; 
           var re = this.doKeyUp(ev, key);                 
           this.logInfo("doc key "+key+" up!");  
           if(typeof re == "undefined") { 
            re = true; 
           } 
           if(!re) { 
            if(ev.preventDefault) {      
            // Firefox        
            ev.preventDefault();        
            ev.stopPropagation();      
        } else {        
            // IE        
            ev.cancelBubble=true;        
            ev.returnValue = false; 
        } 
           } 
           key = null; 
           ev = null; 
           return re; 
       } 
}, 
/**
 * 键盘按下.
 * @param ev 事件对象
 */ 
_docKeyDown:function(ev) { 
    if(this.focus) {                 
        var key = ev.keyCode || ev.charCode || ev.which; 
           var re = this.doKeyDown(ev, key);   
           if(typeof re == "undefined") { 
            re = true; 
           } 
           //this.logInfo("doc key "+key+" down!");                
           if(!re) { 
            if(ev.preventDefault) {      
            // Firefox        
            ev.preventDefault();        
            ev.stopPropagation();      
        } else {        
            // IE        
            ev.cancelBubble=true;        
            ev.returnValue = false; 
        } 
           } 
           key = null; 
           ev = null; 
           return re; 
       } 
}, 
/** www.jb200.com
 * 鼠标滚动.
 * @param ev 事件对象
 */ 
_docMouseWheel:function(ev) { 
    if(this.focus) { 
        this.doMouseWheel(ev); 
        //this.logInfo("doc mouse wheel!"); 
        return true; 
    } 
    return false; 
}, 
/**
 * 执行焦点事件.
 * @param ev 事件
 */ 
doFocus:function(ev) { 
    this.logInfo("focus"); 
    if(typeof this.onFocus == "function") { 
        this.onFocus(ev); 
    } 
}, 
/**
 * 执行失去焦点事件.
 * @param ev 事件
 */ 
doBlur:function(ev){ 
    this.logInfo("blur"); 
    if(typeof this.onBlur == "function") { 
        this.onBlur(ev); 
    } 
}, 
/**
 * 鼠标按下事件.
 * @param ev 事件
 */ 
doMouseDown:function(ev) { 
    if(typeof this.onMouseDown == "function") { 
        this.onMouseDown(ev); 
    } 
}, 
/**
 * 鼠标移动事件.
 * @param ev 事件
 */ 
doMouseMove:function(ev) { 
    if(typeof this.onMouseMove == "function") { 
        this.onMouseMove(ev); 
    } 
}, 
/**
 * 鼠标弹起事件.
 * @param ev 事件
 */ 
   doMouseUp:function(ev) { 
    if(typeof this.onMouseUp == "function") { 
        this.onMouseUp(ev); 
    } 
}, 
/**
 * 按键按下事件.
 * @param ev 事件
 */ 
doKeyDown:function(ev, key) { 
    if(typeof this.onKeyDown == "function") { 
        this.onKeyDown(ev); 
    } 
    return true; 
}, 
/**
 * 按键弹起事件.
 * @param ev 事件
 */ 
doKeyUp:function(ev, key) { 
    if(typeof this.onKeyUp == "function") { 
        this.onKeyUp(ev); 
    } 
    return true; 
}, 
/**
 * 鼠标滚动事件.
 * @param ev 事件
 */ 
doMouseWheel:function(ev) { 
    if(typeof this.onMouseWheel == "function") { 
        this.onMouseWheel(ev); 
    } 
}, 

几个方法内用到了this.hasSelect变量, 该变量每次在thisWindow元素的onMouseUp事件中初始化,因为浏览器都是先执行dom事件,再执行document事件,因此如果鼠标点在thisWindow元素之上或之外,都可以跟据该变量来判断,以此用于判断当前控件是否处于焦点状态,把判断处理放到_docMouseUp, _docMouseDown之中,在这两个函数内执行doFocus, doBlur事件。

后续控件包括容器控件,因此再添加控件之间parent与child函数
 

复制代码 代码示例:
/**
 * 获取当前dom容器.
 * @return 返回窗口元素
 */ 
getContainer:function(){ 
    return this.thisWindow; 
}, 
 
/**
 * 添加子控件.
 * @param element 子控件
 */ 
appendChild:function(element){ 
    this.thisWindow.appendChild(element); 
}, 
 
/**
 * 删除子控件.
 * @param element 子控件
 */ 
removeChild:function(element) { 
    for(var i = 0, len = this.childNodes.length; i < len; i++) { 
        if(this.childNodes[i].index == element.index) { 
            this.childNodes.splice(i, 1); 
            this.getContainer().removeChild(element.getContainer());  
            break
        }  
    } 
}, 
 
 /**
 * 设置父控件.
 * @param element 父控件
 * @param notAppend 不添加到元素.
 */ 
setParent:function(element, notAppend){ 
    if(element.isComponent) { 
        //如果是控件则调用通用添加 
        if(notAppend != true) { 
            element.getContainer().appendChild(this.thisWindow); 
        } 
        element.childNodes.push(this);   
        this.parent = element; 
    } else { 
        //如果是dom,则用此分支添加 
    if(typeof element.appendChild !== "undefined") { 
        if(notAppend != true) { 
            element.appendChild(this.thisWindow); 
        }                    
        this.parent = element; 
    } 
    if(notAppend != true) { 
        this.getAXY(); 
    }                
    } 
}, 

到此,把可见控件的容器,事件等基本处理编写完毕。