事件驱动的JScript面对象编程（例）|中文方案文档站(提供各类方案下载,WORD文档下载,范文,案例等)

说完了事件驱动的jscript面对象编程。我们来看看一个具体的例子：
假如我们要在网页上做一种可编辑的label。正常情恥下它像一般的文本一样。当用鼠标点击它时就变成输入框并可编辑文本的内容。然后当它失去焦点时又恢复成正常文本的样子。

程序运行的例子如下：

点击文字看看。

程序的源代码如下：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<script language="jscript">
function editabletext(_owner){
this.owner = _owner;

this.edit = document.createelement("input");
this.edit.type = "text";
this.edit.onblur = this.oneditblur;
this.edit.onclick = this.oneditclick;
this.edit.obj = this;

this.span = document.createelement("span");
this.span.innertext = "editabletext";
this.span.obj = this;
this.span.onclick = this.onspanclick;

this.owner.appendchild(this.span);
}
function editabletext.prototype.oneditclick(){
event.cancelbubble = true;
}
function editabletext.prototype.oneditblur(){
event.cancelbubble = true;
var self = this.obj;
self.span.innerhtml = "";
self.span.innertext = self.edit.value;
}
function editabletext.prototype.onspanclick(){
event.cancelbubble = true;
var self = this.obj;
self.edit.value = this.innertext;
this.innerhtml = "";
this.appendchild(self.edit);
self.edit.focus();
}
////////////////////////////////////////////////////////////
function init(){
for(var i=0;i<20;i++){
new editabletext(document.body);
var br = document.createelement("br");
document.body.appendchild(br);
}
}
init();
</script>

</body>
</html>

注意程序后面的init函数。里面的new editabletext(document.body)只是建立了对象。但是我并无保存建立的对象的引用。而是让对象自己去管理自己。对象的行为都是由事件来驱动的(onclick和onblur),而无须别外的辅助代码。

事件驱动的JScript面对象编程（例）

[入库：2005年8月18日] [更新：2007年3月24日]