說完了事件
驅動的JScript面對象編程。我們來看看一個具體的例子：
假如我們要在網頁上做一種可編輯的Label。正常情怳下它像一般的文本一樣。當用鼠標點擊它時就變成輸入框並可編輯文本的內容。然後當它失去焦點時又恢復成正常文本的樣子。
程序運行的例子如下：
點擊文字看看。
EditableText
EditableText
達到
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
|
程序的源代碼如下：
<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),而無須別外的輔助代碼。
