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

原创 2004年04月28日 00:04: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),而无须别外的辅助代码。

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

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

事件驱动编程

查了资料,有点乱,理解这个概念看来不易,先把看过的做下笔记: 要看是哪一层的,  例如这个,貌似是对于单任务的操作系统,适用于一些简单那的单片机,这个其实是在一个顺序结构的程序里写了个状态机,然后...
  • fengyunjh6
  • fengyunjh6
  • 2015年03月11日 11:14
  • 368

nodejs学习笔记一:什么是事件驱动编程风格

这年头nodeJS真是如日中天啊,学前端的要是不知道nodeJS,都不好意思说自己和懂点代码的美工有啥区别,谈到nodeJS就不得不先聊聊它的事件驱动编程风格。究竟什么是事件驱动编程风格呢?在传统编程...
  • u011413061
  • u011413061
  • 2015年09月30日 23:04
  • 1388

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

部分摘自 http://www.aosabook.org/en/twisted.html 中文版全文:http://blog.csdn.net/hanhuili/article/details/...
  • solo_ws
  • solo_ws
  • 2016年02月24日 16:42
  • 2471

事件驱动编程---队列应用--银行排队模拟--学习与思考

栈,队列这些数据结构在理解其原理上,比较简单,实现一个简单的队列也不是难事。但当仅仅学习完这些简单的基础之后,关于队列真正在实际的应用,还是很抽象,生疏,所以特地研究了几个应用队列的经典案例,对于初学...
  • weixin_35929051
  • weixin_35929051
  • 2016年09月10日 14:05
  • 471

《unix/linux编程实践教程》学习笔记:第七章 事件驱动编程:编写一个视频游戏

本章以一个弹珠游戏为例,学习了 屏幕编程的curses库(Ubuntu中需要另外安装软件) 时间编程,使用计时器 信号处理 临界区 注意编译的命令为 gcc filename.c - o ...
  • yz764127031
  • yz764127031
  • 2017年03月12日 18:09
  • 189

并发,同步,异步以及事件驱动编程的相关技术

并发,同步,异步以及事件驱动编程的相关技术   前言   这篇文章的存在主要是因为本屌才疏学浅,会的东西实在有限,作为本屌的学习之用,如果有前辈能指正一二,本屌将不胜感激!因为本屌...
  • shanyongxu
  • shanyongxu
  • 2015年08月27日 10:58
  • 2348

Android事件驱动编程-基于EventBus(一)

虽然在Android开发具有某些事件驱动的特性,但它还远不是纯粹的事件驱动架构。这算是好事还是坏事呢?正如在软件开发领域中任何事情一样,想回答它并不容易:这取决于具体情况。...
  • ACE1985
  • ACE1985
  • 2015年02月26日 17:08
  • 2121

经典软件设计模型 - 事件驱动模型

模型说明 在UI编程中,常常要对鼠标点击进行相应,首先如何获得鼠标点击呢? 方式一:创建一个线程,该线程一直循环检测是否有鼠标点击,那么这个方式有以下几个缺点: 1. CPU资源浪费,可能鼠标点击的频...
  • Gykimo
  • Gykimo
  • 2013年06月27日 15:06
  • 28568

观察者模式实现事件驱动模型(非GUI事件)

观察者模式是软件设计模式的一种。此种模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都得到通知并自动更新。该模式通常被用来实现事件驱动处理系统。...
  • littleschemer
  • littleschemer
  • 2016年05月07日 16:25
  • 7310
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:事件驱动的JScript面对象编程(例)
举报原因:
原因补充:

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