`
qinzhenzhou
  • 浏览: 10565 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

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控件开发之按钮控件
  • 6.rar (12.9 KB)
  • 下载次数: 6
分享到:
评论

相关推荐

    javascript控件开发之可见控件 1

    在JavaScript控件开发中,"可见控件"是构建用户界面UI的重要组成部分。这些控件是用户与应用程序交互的桥梁,比如按钮、文本框、下拉列表等。本篇文章将聚焦于可见控件的渲染基类,这是创建自定义、高级控件的基础。...

    javascript控件开发之继承关系

    在这个主题中,“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构,以及如何通过继承来实现代码的复用和模块化。 在JavaScript中,继承是基于原型...

    javascript控件开发之控件初体验

    JavaScript控件开发是Web应用程序中不可或缺的一部分,它允许开发者创建具有特定功能和交互性的用户界面元素。本篇文章将深入探讨JavaScript控件开发的基础知识,帮助初学者了解如何创建自己的控件,并提供一个实际...

    javascript控件开发之布局控件

    JavaScript控件开发是Web开发中的重要一环,特别是在构建交互丰富的网页应用时。布局控件是其中的关键元素,它允许开发者有效地组织和管理页面上的元素,实现多控件的协调和共存。在这个主题中,我们将深入探讨...

    javascript控件开发之动态加载

    JavaScript控件开发是一种常见的Web应用开发技术,它允许开发者创建交互性强、功能丰富的用户界面元素。动态加载作为JavaScript控件开发中的一个重要概念,是提升网页性能和用户体验的关键手段。动态加载意味着控件...

    javascript控件开发之工具栏控件

    在JavaScript控件开发中,工具栏控件是一个关键的元素,它通常被用来提供用户界面中的功能快捷方式或操作选项。工具栏控件的设计和实现是网页交互性的重要组成部分,尤其是在构建富客户端应用或者增强用户体验的网页...

    javascript控件开发之按钮控件

    在JavaScript的世界里,控件是构建用户界面的基本元素,它们为用户提供交互能力,使得Web应用更具活力和用户体验。...记住,实践是提高技能的关键,不断地尝试和改进,你将成为一名出色的JavaScript控件开发者。

    javascript控件

    JavaScript控件是网页开发中常用的一种元素,它们用于增强用户界面的交互性和功能。JavaScript是一种轻量级的脚本语言,常被嵌入HTML页面中,以实现动态内容的生成和用户交互。在这个主题中,我们将深入探讨...

    javascript控件开发之渲染对象

    在JavaScript控件开发中,渲染对象是一个至关重要的概念,它涉及到如何将数据转换为用户界面可见的元素。本文将深入探讨渲染对象的概念、工作原理以及如何在实际开发中使用它们。 渲染对象通常指的是在JavaScript中...

    javascript控件开发之滚动条控件

    在网页中,本身就有滚动条,在显示文本内容的时候,原始的滚动条已够用,一般如果我们想实现一个类似列表的控件时,也可以把所有的列表数据输出到一个完整的标签,再嵌入到一个DIV中即可,然而如果数据量达到几千行...

    几个经典JavaScript控件下载

    这些JavaScript控件体现了JavaScript在前端开发中的强大能力,它们可以提升用户体验,使网页更加动态和互动。开发者可以学习并利用这些组件,快速构建具有高级特性的网页应用,同时也可以自定义样式和行为,以适应...

    JS控件,JAVASCRIPT控件,实用控件!

    JavaScript控件,通常简称为JS控件,是Web开发中常用的一种技术,它利用JavaScript语言来实现用户界面的交互和动态功能。JavaScript控件能够增强网页的用户体验,提供丰富的图形界面,以及各种用户输入和数据处理...

    javascript时间控件

    "java源代码"标签可能意味着这个时间控件包含Java语言的后端部分,用于处理与前端JavaScript控件的交互,例如验证用户输入的时间数据,或者将时间数据保存到数据库。Java的后端可以使用Servlet、JSP(JavaServer ...

    Javascript密码输入控件

    JavaScript密码输入控件是网页开发中常见的一种交互元素,它用于收集用户的安全信息,如登录密码、PIN码等。在Web应用中,正确地实现密码输入控件对于提高用户体验和保障数据安全至关重要。本文将深入探讨JavaScript...

    javascript开发的实用页面选项卡控件

    在实际开发中,还可以考虑使用现有的JavaScript库或框架,如jQuery、React、Vue等,它们提供了成熟的组件系统和丰富的API,可以帮助开发者更快捷、高效地创建出具有交互性和动画效果的选项卡控件。同时,对于响应式...

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...

Global site tag (gtag.js) - Google Analytics