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

最新推荐文章于 2024-07-08 17:28:27 发布

oo_chen

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量504

点赞数

本文链接：https://blog.csdn.net/oo_chen/article/details/592510

版权

程序的源代码如下：

<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),而无须别外的辅助代码。

oo_chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件驱动的JScript面对对象编程（例）

程序的源代码如下：无标题文档 function EditableText(_owner){this.owner = _owner;this.edit = document.createElement("input");this.edit.type = "text";this.edit.onblur = thi
复制链接

扫一扫