找回密码
 注册
搜索
热搜: 回贴

事件驱动的JScript面对象编程

2009-12-16 01:39| 发布者: admin| 查看: 27| 评论: 0|原作者: 天仙子

  在这里分享一下我对JScript的面对象编程的一些认识和一点解决方案。JScript和JavaScript差不多(当然有所不同),但本文中讲到的内容也可用于JavaScript
  JScript支持面对象的一些属性,但他的this指针很奇怪,当有一个对象obj1中的一个成员函数用到this,如果有别一个对象obj2引用该函数,那这个this指向的不是obj1,而是obj2。
下面我们来看一个例子:
无标题文档

this is the element "p"




  从上面的例子中我们可以知道JScrpt中函数引用只是引用了函数的入口,并没有保存对象的引用。而this只是简单的指向调用函数的对象而已。JScript并无对象指针这种东西(可能我不知道,如果看文章的您知道的话,请告诉我(QQ:123737))。

  在我们通常写一些要处理HTML元素的onclick事件的时候,我们会这样写
方法一:



element





方法二:

element





  上面两个方法的动行结果是一样的,可能你会发现方法一的onclick="fun(this) "直现一些。方法二的fun更理性些。但方法一的fun(this)的this太麻烦了,把代码改成:



element



  你会发现这个脚本是不能工作的。为什么??当你用方法一书写时,实际上这时onclick的处理事件是这样的:

function anonymous() { fun(this) }

  也就是说IE为onclick事件创造了一个匿名函数,并在函数中调用了fun函数。由于调用anonymous的是对象text,所以this就把text的引用传给了fun函数。这时fun中的形参obj就指向text。如果您把事件绑定写成:

element



  则由于调用fun()的是函数anonymous而不是对象text,所以如果您在fun中使用this的话,这里this是不指向任何地方的。如果您alter(this)的话,您会发现他的值是undefined。

  在方法二中,onclick的处理事件就是fun,所以this是可用的,它指向text。但您千万不要把方法二中fun的定义写成:

function fun(obj){

alert(obj.innerText);

}

  当text响应onclick事件调用onclick时是不传递任何参数给fun的,这时obj就是undefined了。

  问题已经明确,但当我们要响应HTML的事件,而处理的信息又是存在于对象中时又该怎么办呢?(当然处理方法是基于纯事件驱动的)

  我们可以这样:

click this





  点击click this结果显示"this is obj"。使用该方法就可以用JScript纯事件驱动的程序了。
  说完了事件驱动的JScript面对象编程。我们来看看一个具体的例子:
  假如我们要在网页上做一种可编辑的Label。正常情怳下它像一般的文本一样。当用鼠标点击它时就变成输入框并可编辑文本的内容。然后当它失去焦点时又恢复成正常文本的样子。
  程序运行的例子如下:

EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText


  程序的源代码如下:



无标题文档








  注意程序后面的init函数。里面的new EditableText(document.body)只是建立了对象。但是我并无保存建立的对象的引用。而是让对象自己去管理自己。对象的行为都是由事件来驱动的(onclick和onblur),而无须别外的辅助代码。
  程序运行的例子如下:

EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText
EditableText


  程序的源代码如下:



无标题文档








  注意程序后面的init函数。里面的new EditableText(document.body)只是建立了对象。但是我并无保存建立的对象的引用。而是让对象自己去管理自己。对象的行为都是由事件来驱动的(onclick和onblur),而无须别外的辅助代码。

最新评论

QQ|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )

GMT+8, 2024-9-30 05:36 , Processed in 0.274436 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

返回顶部