|
|
事件驱动的JScript面对象编程(例) |
|
|
作者:未知 来源:月光软件站 加入时间:2005-2-28 月光软件站 |
说完了事件驱动的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),而无须别外的辅助代码。 
|
|
相关文章:相关软件: |
|