javascript控件开发之可见控件(2)

经过上一篇，我们开始了可见控件的实现，考虑控件会用到键盘及鼠标，因此在上一篇控件com.ui.window基础上，我们再添加事件的处理，添加函数_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;
            }
	    },
	    /**
	     * 鼠标滚动.
	     * @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();
		    	}		    	
	    	}
	    },

到此，我们把可见控件的容器，事件等基本处理编写完毕，
可下载附件查看完整的window源码
请关注下一篇， javascript控件开发之按钮控件