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

原创 2004年09月20日 20:06:00

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

事件驱动的JScript面对象编程

在这里分享一下我对JScript的面对象编程的一些认识和一点解决方案。JScript和JavaScript差不多(当然有所不同),但本文中讲到的内容也可用于JavaScript JScript支持面对...
  • Mykxxx
  • Mykxxx
  • 2004年04月28日 22:47
  • 1074

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

程序的源代码如下: 无标题文档 function EditableText(_owner){this.owner = _owner;...
  • oo_chen
  • oo_chen
  • 2006年02月05日 21:43
  • 379

Microsoft JScript 运行时错误: 缺少对象,原因分析

      今天接到一个任务,原因是一个不知道的jsp页面,在点击关闭一个div面板时发生错误:Microsoft JScript 运行时错误: 缺少对象,原因分析      然后百度了一番,  是某...
  • xcl119xcl
  • xcl119xcl
  • 2010年11月17日 01:13
  • 9188

Javascript事件驱动编程

Javascript事件驱动编程 基本概述     JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理。 PS:...
  • q547550831
  • q547550831
  • 2015年12月25日 14:10
  • 2233

JavaScipt——基于对象和事件驱动的客户端语言

JavaScript(下面简称JS)是一种基于对象和事件驱动的语言。所谓基于对象,这和我们常说的面向对象语言是有所不同的。 面向对象,简单而言就是用户可以自己定义设计类。 JavaScript(下...
  • Helios_2015
  • Helios_2015
  • 2014年10月14日 09:07
  • 1135

Microsoft JScript 运行时错误: 对象不支持此属性或方法

在64位机器上,如果COM组件没有错误(例如:可以通过C++、IE调用),但不能在控制台用JavaScript调用(通过cscript运行JavaScript),则可能是因为控制台与COM组件的位数不...
  • cqdjyy01234
  • cqdjyy01234
  • 2017年03月11日 21:40
  • 247

黑马程序员训练营:事件驱动机制原理

一、事件驱动机制基本原理当一个事件源注册某个类型的监听器时,将添加此监听器对象到内部进行存储。并且,在监听器所关注的方法中,根据监听器关注的事件类型产生相应的事件,接着将事件传递给监听器对象和调用其约...
  • zybzyb1987
  • zybzyb1987
  • 2011年04月09日 21:38
  • 2875

事件驱动的JScript面对象编程 选择自 Mykxxx 的 Blog

  在这里分享一下我对JScript的面对象编程的一些认识和一点解决方案。JScript和JavaScript差不多(当然有所不同),但本文中讲到的内容也可用于JavaScript JScript支持...
  • zwyl2001
  • zwyl2001
  • 2005年02月16日 10:07
  • 570

Linux基于事件驱动的程序框架(转载)

[转]Linux 2.6 内核Epoll用法举例说明epoll用到的所有函数都是在头文件sys/epoll.h中声明的,下面简要说明所用到的数据结构和函数:所用到的数据结构: typedef unio...
  • mochouxiyan
  • mochouxiyan
  • 2010年02月21日 11:04
  • 5400

单线程、多线程以及事件驱动编程模型对比

部分摘自 http://www.aosabook.org/en/twisted.html 中文版全文:http://blog.csdn.net/hanhuili/article/details/...
  • solo_ws
  • solo_ws
  • 2016年02月24日 16:42
  • 2608
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:事件驱动的JScript面对象编程(例)
举报原因:
原因补充:

(最多只允许输入30个字)