站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题事件驱动的JScript面对象编程(例)

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

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


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

程序运行的例子如下:

点击文字看看。

<table style="BORDER-COLLAPSE: collapse" borderColor=#cccccc cellSpacing=0 cellPadding=0 width=600 border=1> <tr> <td id=content bgColor=#f5f5f5> <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.all.content); var br = document.createElement("br"); document.body.all.content.appendChild(br); } } init(); </script> </td></tr></table>

程序的源代码如下:

<table style="BORDER-COLLAPSE: collapse" borderColor=#cccccc cellSpacing=0 cellPadding=10 width=600 border=1> <tr> <td bgColor=#f5f5f5>
<head>

无标题文档
</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>

</td></tr></table>

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

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 事件驱动的JScript面对象编程
后一篇: 删除数组元素.