事件驱动的JScript面对象编程(例)

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

说完了事件驱动的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),而无须别外的辅助代码。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航