当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 事件驱动的JScript面对象编程（例）

Javascript
如何用js控制css中的float的代码
Autocomplete Textbox Example javascript实现自动完成成功
FormValid0.5版本发布，带ajax自定义验证例子
wordpress之js库集合研究介绍
推荐发几个常用控件(新加DHTML控件)
7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
javascript下阻止表单重复提交、防刷新、防后退
javascript下计数器每秒自动加1
给所有的超级练级都加上onmousemove时间的js代码
js实现运行代码需要刷新的解决方法
兼容FF/IE跟随鼠标的层的效果
用javascript获得css中的属性值的代码
用javascript实现页内搜索的脚本代码
用javascript 控制表格行的展开和隐藏的代码
用javascript实现隐藏状态栏的代码
Code:　write(s,d) 输出连续字符串
javascript创建页面蒙板的一些知识技巧总结
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
用javascript判断输入数据是否货币并自动添加￥符号的代码
js类中获取外部函数名的方法

No. « 79 80 81 82 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 362 ::
收藏到网摘: n/a

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