fcs

 

　　时下在互联网上很流行焦点区域轮播(焦点图)的形式，形式上就是以醒目的大图或配以说明性文字,进行定时交替播放。至于实现的技术手段就是FLASH或javascript的动态前台技术（基本没有什么技术含量可言）。不过从呈现方式上虽然精髓都是同一个，都是以同一区域展示的信息量成倍增加为最终目的，但是呈现效果、用户体验上可就是五花八门，百家争鸣，百花其放，丑态百出（这个好象不搭调）。
　　现面我们就拿几个最典型的实现方式来小论一下:
　　首先是在国内网站上比较流行的一种焦点图方式,所谓的新浪风格:

新浪的焦点轮播

这种轮播方式被国内大大小小网站拿来的拿来,演绎的演绎:

小熊在线的焦点轮播

太平洋电脑网的焦点轮播

　　要说明的是这种轮播图的方式目的已经达到,即上述的内容展示加倍。但是这种形式有两个缺点。第一，下面的当前播放的指示，不知设计人员是怎么考虑的，一个焦点图的位置能放几十还是几百张图片吗？最多超不过10张（通常3－5张），难道把用户当白痴数不清10以内或5以内的数？非要你标记一下那难看的系统字体的数字在下面？下面的指示器目的是说明共几张，当前第几张，小色块就足够了，加数字即影响美观又增加不必要的文件大小，简直是画蛇添足。第二，就是花里胡哨的过场效果，本来就不大的焦点区弄些乱七八糟的过场，用户刚看上去还比较新鲜，不出两三次就会烦，所以不要添加过场，这样就不会触犯任何审美倾向的用户。而且相当程度上减小了文件大小，带宽等开销，提升用户浏览的流畅性。

　　第二种是上述情况的改进型，个人认为是最好的轮播方式，简洁大方，好用易用：

news.yahoo.com

CCTV

　　这两个就是使用了小ICON做播放指示，简洁大方。CCTV的张数就有些多了，这时使用数字才比较合适，不过还可以接受。而YAHOO的那个只有三个，如果换成1.2.3，那真的就是把用户当白痴了，至少我还能数清楚是三张。

　　第三种很流行的是播放指示部分除了指示轮播张数、当前位置的作用外，还增加了内容缩略的作用：

CNET.COM

beijing2008.cn

上面这两个就是将内容缩略和播放指示和二唯一了，这使得用户即能知道当前播放的是那张，一共几张，还能看到每张的大概内容。其中beijing2008的那个增加了进度指示功能，可以让用户清楚自己看到下一张需要等多少时间。当然时间间隔指示有很多种，下面的就不错：

ESPN

这个时间间隔指示使用的是所谓的的2.0样式，一个环状加载指示。

总结：
轮播这种方式要么就用最简单的呈现，上述第二种，即能达到目的，又能给用户带来比较好的体验（这个有点大，通俗点，就是不招人烦）。要么就用第三种，让用户彻底清晰明了，知道自己在看什么，将要看到什么，多久能看到… … 。不伦不类的呈现方式还是尽量避免使用。

(to view associated entry please click here)

为你的链接添加站点缩略图

( Miscellanea and Javascript )

snap.com 提供了一项服务，通过增加一段代码实现在你的站点链接上弹出所链接地址的网页缩略图，如：http://www.snap.com/。

具体步骤：
一、进入注册页面

在左侧的注册框中有两个文本输入框：
Site URL:填入你要放置站点缩略功能的网站域名，比如 http://www.fscommand.com.cn/

Email:你的联系email

点击绿色“Go to step 2”按钮。

二、输入验证码获取代码

在Enter Security Token: 中输入下面的验证码

选中“ I agree to the Terms & Conditions below.”复选框

点击“Get Code”按钮

在右侧Step 3: Copy Your Code文本框中出现你站点专用的代码。将这段代码拷贝到你站点的页面的标签中。

(to view associated entry please click here)

IE6 中带有背景的链接闪烁

( Javascript and Html&Css )

（本文翻译自ADOBE）
在IE6中带有背景的链接在鼠标浮上时背景图片会闪烁，这个问题可以用以下方式解决，前提是浏览器开启了Javascript功能：

1. <script type= “text/javascript”>
2. try {
3.   document. execCommand ( ‘BackgroundImageCache’, false, true );
4. } catch (e ) { }
5. </script>

目的是打开背景缓存。IE7已经修复此BUG。

(to view associated entry please click here)

介绍一下Adobe 的Spry Ajax Framework

( Spry )

　　Spry Ajax 开发框架是一个Javascript库，它能够为想要实现富应用的网页设计师及开发人员提供各种功能。

　　Spry是 为了那些需要Ajax，却没有其他框架可用或易用的网页设计团体而设计的。最初的Spry 框架是为了设计师能够使用HTML，CSS，和很少的Javascript实现将XML数据集成到他们的页面中，并不需要刷新页面。

　　Spry 框架是以HTML为中心，具有HTML，CSS，Javascript基础知识的用户就可以方便的部署。这个框架设计的方针就是标记尽量简单，Javascript使用尽量的少。任何做WEB设计开发的人都可以选择Spry 框架。

　　对于XML的数据加载和呈现是这个框架的强项，其核心的数据集概念使得数据调用非常方便。

　　目前的Spry Ajax还处于预览版本，并在不断改进之中。截止到写这篇BLOG的时候是pre-release 1.3版本。

(to view associated entry please click here)

Javascript cookie 详解

( Javascript )

cookie概述

　　假如利用一个不变的框架来存储购物栏数据，而商品显示页面是不断变化的，尽管这样能达到一个模拟全局变量的功能，但并不严谨。例如在导航框架页面内右击，单击快捷菜单中的【刷新】命令，则所有的JavaScript变量都会丢失。因此，要实现严格的跨页面全局变量，这种方式是不行的，JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。

　　cookie 是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是 JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个 cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

　　不同的浏览器对cookie的实现也不一样，但其性质是相同的。例如在Windows 2000以及Windows xp中，cookie文件存储于documents and settings/userName/cookie/文件夹下。通常的命名格式为：userName@domain.txt。

　　cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

1.保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。

2.跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。

3.定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

4.创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

1.cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；

2.cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；

3.cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；

4.cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

设置cookie

每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：

document.cookie=”userId=828″;

如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：

document.cookie=”userId=828; userName=hulk”;

在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此种方案还可以避免中文乱码的出现。例如：

document.cookie=”str=”+escape(”I love ajax”);

相当于：

document.cookie=”str=I%20love%20ajax”;

当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值，这在前面已经介绍过。

尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值，例如连续执行下面两条语句：

document.cookie=”userId=828″;

document.cookie=”userName=hulk”;

这时浏览器将维护两个cookie，分别是userId和userName，因此给document.cookie赋值更像执行类似这样的语句：

document.addCookie(”userId=828″);

document.addCookie(”userName=hulk”);

事实上，浏览器就是按照这样的方式来设置cookie的，如果要改变一个cookie的值，只需重新赋值，例如：

document.cookie=”userId=929″;

这样就将名为userId的cookie值设置为了929。

获取cookie的值

下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得：

var strCookie=document.cookie;

这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。

在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：

document.cookie=”userId=828; expires=GMT_String”;
其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。

删除cookie

为了删除一个cookie，可以将其过期时间设定为一个过去的时间．

指定可访问cookie的路径
默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。例如在　www.xxxx.com/html/a.html　中所创建的cookie，可以被　www.xxxx.com/html/b.html　或　www.xxx.com/html/ some/c.html　所访问，但不能被　www.xxxx.com/d.html　访问。

为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：

document.cookie=”name=value; path=cookieDir”;

其中cookieDir表示可访问cookie的目录。例如：

document.cookie=”userId=320; path=/shop”;

就表示当前cookie仅能在shop目录下使用。

如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：

document.cookie=”userId=320; path=/”;

指定可访问cookie的主机名

和路径类似，主机名是指同一个域下的不同主机，例如：

www.google.com 和 gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：

document.cookie=”name=value; domain=cookieDomain”;

以google为例，要实现跨主机访问，可以写为：

document.cookie=”name=value;domain=.google.com”;

这样，所有google.com下的主机都可以访问该cookie。

综合示例：构造通用的cookie处理函数
cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。下面列出了常用的cookie操作及其函数实现。

1．设置COOKIE
function SetCookie(name,value,expires,path,domain,secure)
{
var expDays = expires*24*60*60*1000;
var expDate = new Date();
expDate.setTime(expDate.getTime()+expDays);
var expString = ((expires==null) ? “” : (”;expires=”+expDate.toGMTString()))
var pathString = ((path==null) ? “” : (”;path=”+path))
var domainString = ((domain==null) ? “” : (”;domain=”+domain))
var secureString = ((secure==true) ? “;secure” : “” )
document.cookie = name + “=” + escape(value) + expString + pathString + domainString + secureString;
}

2．获取指定名称的cookie值：
function GetCookie(name)
{
var result = null;
var myCookie = document.cookie + “;”;
var searchName = name + “=”;
var startOfCookie = myCookie.indexOf(searchName);
var endOfCookie;
if (startOfCookie != -1)
{
startOfCookie += searchName.length;
endOfCookie = myCookie.indexOf(”;”,startOfCookie);
result = unescape(myCookie.substring(startOfCookie, endOfCookie));
}
return result;
}

3．删除指定名称的cookie：
function ClearCookie(name)
{
var ThreeDays=3*24*60*60*1000;
var expDate = new Date();
expDate.setTime(expDate.getTime()-ThreeDays);
document.cookie=name+”=;expires=”+expDate.toGMTString();
}

(to view associated entry please click here)

关闭窗口时触发事件（刷新时不触发onunload）

( Javascript )

　　要在关闭窗口时触发一个事件，我们会想到window对象提供了两个事件：onUnload和onBerforUnload，因为它们是针对document的，当document被卸载或被卸载前触发。但这两个事件在刷新时也会触发，所以我们要采用什么方法来屏蔽除了关闭窗口操作以外而触发的onUnload和onBerforUnload事件从而执行里面的操作呢？代码如下：］

1. <script>
2. window. onunload = function ( ) { if (self. screenTop> 9000 ) alert ( ‘该窗口已经被关闭！’ ) }
3. </script>
4.  
5. 或
6.  
7. <script>
8. window. onunload = function ( ) { if (self. screenLeft> 9000 ) alert (该窗口已经被关闭！. ‘)}
9. </script>

原理如下：
window.screenTop
获取浏览器客户区左上角相对于屏幕左上角的 y 坐标
screenTop>后面的数字必须大于你显示分辩率中的高度
比如，800*600, 这个数得大于600
window.screenLeft
获取浏览器客户区左上角相对于屏幕左上角的 x 坐标
screenLeft>后面的数字必须大于你显示分辩率中的宽度
比如，800*600, 这个数得大于800

通常这两个值设为9000

(to view associated entry please click here)

JS生成空IFRAME并修改内容

( Javascript )

在页面放置空IFRAME，然后改变其文档HTML代码，可以实现代码不首父页STYLE控制，方便抓站使用。将抓来的代码放在一个JS变量中。注：要替换单引号，删除所有换行符。

代码如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns=“http://www.w3.org/1999/xhtml”>
3. <head>
4. <title> </title>
5. <meta http-equiv=“Content-type” content=“text/html; charset=gb2312″ />
6. <meta name=“keywords” content=“,” />
7. <meta name=“description” content=“” />
8. <style type=“text/css”>
9. <!–
10. body {
11.         padding:0;
12.         margin-top:4px;
13.         background:#fff;
14.         text-align:center;
15.         color:#f00;
16. }
17. h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td, fieldset, label, legend {
18.         margin:0;
19.         padding:0;
20. }
21. –>
22. </style>
23. </head>
24. <body onload=“checkit1()”>
25. <p>
26. 在页面放置空IFRAME，然后改变其文档HTML代码，可以实现代码不首父页STYLE控制，方便抓站使用。将抓来的代码放在一个JS变量中。
27. </p>
28. <script language=“javascript” type=“text/javascript”>
29.                         // <![CDATA[ </iframe>‘);
30.                         var contenthtml =  ‘<p>在页面放置空IFRAME，然后改变其文档HTML代码，可以实现代码不首父页STYLE控制，方便抓站使用。将抓来的代码放在一个JS变量中。注：要替换单引号，删除所有换行符。 </p>‘;
31.                         function checkit1(){
32.                                 if(contenthtml != ""){
33.                                         fr1.document.body.innerHTML = contenthtml;
34.                                         document.getElementById("fr1").height=fr1.document.body.scrollHeight;
35.                                 }
36.                         }
37.                         //]]>
38.                         </script>
39.                         <script language="javascript" type="text/javascript">
40.                         // <![CDATA[
41.                         if(contenthtml != ""){
42.                                 document.write(’ <iframe name= “fr1″ id= “fr1″ marginheight= “0″ marginwidth= “0″ frameborder= “0″ width= “580″ height= “0″ style= “margin:0 auto;padding:20px;” scrolling= “no” src= “” >
43.                         }
44.                         //]]>
45.                         </script>
46. </body> </html>

(to view associated entry please click here)

再谈flash调用Javascript

( Flash and Javascript )

Flash调用页面中的javascript函数在做一些flash操作页面DOM的应用的时候很有用,在flash actionscript中调用javascript中的函数方法有两个：

• getURL(”javascript:checkit()”)
• FSCommand(”checkit”,id);

  第一种：getURL()实际上的原理相当于HTML中<a href=”javascirpt:alert(’foobar’);”></a>的调用javascript的方式，相当于一个对本页的一个http请求。
  第二种：FSCommand(”checkit”,id);原理类似于HTML中<a href=”＃” οnclick=”checkit(1)” ></a>，相当于直接调用。

  这两种方法最大的不同就是前者向浏览器发送新的HTTP请求，后者没有。这样就带来了一个不可预知的问题，IE和firefox对于第一种的请求方式不同。在IE中浏览器会中断当前的所有请求，来响应来自flash getURL新的请求，这会带来什么问题呢？如果页面还没有下载完，正在下载的东东（图片，外部脚本，外部样式）都会停止，导致页面下载不全。这种情况在firefox中不会出现，因为处理方式不同，FF不会把这个当成一个新的HTTP请求，因为请求的地址是一段JS调用，(IE真的很垃圾，纯属个人观点，FFer万岁)。
  所以建议如果不能确定flash是在页面下载完成之后才进行JS调用，那么就使用FSCommand吧。
  getURL will terminate all of current http requests in internet explorer.FSCommand is ok, so use FSCommand instead of getURL

  (to view associated entry please click here)

  可访问的弹窗链接

  ( Javascript and Practical UE )

  　　我们有时候必须使用弹出窗口，所以我们还是要正确使用它。这篇文章会告诉你如何使你的弹窗链接具有可访问性，更可靠，更简洁。

  　　弹窗链接就是点击后会弹出新窗口，并且依赖于Javascript实现。通常情况下，弹出新窗口的链接是通过设置链接标记A的“target”属性为”_blank”来实现的。但是Javascript还是被经常用于实现弹出窗口的特殊效果，或者文档的DOCTYPE不允许“target”属性。

  链接基础知识

  　　概念很简单，但是我们要解释一些术语为下面内容作些铺垫：

  　　我们会用到HTML的A标记，并会用到它的”href”和“target”属性。我们还会使用Javascript的“window.open” 方法，并涉及到它的三个参数“url” “name” “features”。下面是这两种方式的类比表格：

  概念	a 属性	window.open 参数	说明
  链接地址	href	url	要链接到的地址
  目标窗口	target	name	一个显示窗口的标识符
  特殊功能	N/A	features	目标窗口的呈现形式(大小、工具栏等)

  ---

  
  糟糕的做法

   

  　　首先，我们来看一个典型的有问题的html弹窗链接。

  <a href=”JavaScript:raw_popup(’http://example.com’);void(0)”>pop me up</a>

  　　这段代码存在两个严重的可用性问题，第一个很明显，不支持Javascript的用户无法实现跳转。

  　　原因很简单，也很愚蠢，链接的地址被写成了一个Javascript函数，而不是实际的url地址。

  丑陋的代码

  　　第二个问题不是很明显，但是很具有讽刺意义，当用户本来就打算在新窗口中打开此链接的时候，就会出现无法打开页面的问题。
  　　当我使用右键单击该链接并选择在新窗口或新标签中打开的时候，很明显，浏览器取得这个链接的href属性中的地址，然后填入新窗口的地址栏。但是href属性的地址不是真正的URL而是一段Javascript，所以浏览器无法找到页面。

  　　你可以注意到上面的两个问题全都是源于链接地址的位置被写入了不是地址的Javascript，更好的解决方式就是链接的href属性为真正的链接地址，然后使用一个事件捕捉打开一个弹出窗口，并且设置窗口的各种属性。
  下面是一个示例：

  <a href=”http://example.com” οnclick=”raw_popup(’http://example.com’); return false”>pop me up</a>

  　　为了避免冗余，我们可以把链接对象传给处理函数，来取得其href属性：

  <a href=”http://example.com” οnclick=”raw_popup(this); return false”>pop me up</a>

  　　不过第一个示例也不是不好，如果你希望给支持和不支持Javascript的用户提供不同的访问地址，就可以使用第一个示例的方式。并且要记住，通过右键新建窗口打开的地址是href属性中的地址而不是Javascript函数中的地址。

  　　如果你希望看到一些强大的Javascript，请不要走开。现在我们做的不是怎样去部署Javascript，而是实现优质的HTML代码。上面的两个示例已经解决了可访问性问题，因为它们的href属性中都是实际的目标地址，这已经足够了，但是我们可以做的更好。

  使用HTML完成

  　　我编码的原则是如果HTML能够实现的决不用Javascript，Javascript只是一种对HTML的补充。HTML可以打开链接吗?可以。HTML可以弹出新窗口吗？可以(至少是 transitional DOCTYPE)。HTML可以定义弹出窗口的外观属性吗？不能，这才是Javascript引入的原因。
  下面是一个改进的HTML代码。

  <a href=”http://example.com” target=”_blank” οnclick=”raw_popup(this); return false”>pop me up</a>

  　　加入了target属性后我们可以确保即使用户不支持Javascript也能够在新窗口打开链接，虽然这样无法定制弹出窗口的样式。
  部署Javascript
  现在我们的HTML很简洁，现在我们的要部署一些Javascript代码了。下面是一些功能完善的弹出窗口脚本:

  1. var _POPUP_FEATURES = ‘
  2.   location=0,
  3.   statusbar=0,
  4.   menubar=0,
  5.   width=400,
  6.   height=300
  7. ‘;
  8.  
  9. function raw_popup (url, target, features ) {
  10.   if (isUndefined (features ) ) {
  11.     features = _POPUP_FEATURES;
  12.   }
  13.   if (isUndefined (target ) ) {
  14.     target = ‘_blank’;
  15.   }
  16.   var theWindow =
  17.     window. open (url, target, features );
  18.   theWindow. focus ( );
  19.   return theWindow;
  20. }
  21.  
  22. function link_popup (src, features ) {
  23.   return
  24.     raw_popup (src. getAttribute ( ‘href’ ),
  25.     src. getAttribute ( ‘target’ ) || ‘_blank’,
  26.     features );
  27. }

  　　让我们来仔细看看。
  raw_popup是一个”window.open”的增强，使你的工作更简单：

  • 更好的默认选项，如果没有定义目标窗口，默认是”_blank”。如果不定义窗口属性，默认属性存在全局变量_POPUP_FEATURES中。
  • 焦点：如果弹出窗口已经存在，那么将会被显示在最前。当我们在同一弹出窗口中显示多个页面时，对于使用性而言使窗口显示在最前是正确的方式。

  link_popup是专门为使用链接来打开弹出窗口的。它可以获得链接的href属性，和target属性，如果target属性没有定义，那么默认为”_blank”，这使得函数兼容DOCTYPE为strict的文档。

  isUndefined函数是一个Js Library中的函数，下面还会用到一些Js Library中的函数。（Js Library），如果你只是想在一个页面中弹出一两个窗口的话，上面已经足够了。如果要进行一些重量级的应用，比如图片相册，CMS系统，那么请继续阅读。

  将呈现与逻辑分开

  　　你可能经常听说呈现与逻辑分离是多么多么的重要，是的，这确实很重要。我们回头来看一段HTML代码，有些代码不属于那里，是什么呢？Javascript,没有了onclick。

  <a id=”my-popup-link”
  href=”http://example.com”
  target=”_blank”>pop me up</a>

  　　现在我们必须给那些要弹出窗口的链接增加一个事件监听器，通过Javascript增加监听器要加入下列代码，并且要放在文档的头部。

  function event_popup(e) {
  link_popup(e.currentTarget);
  e.preventDefault();
  }

  listen(’load’, window, function() {
  listen(’click’, ‘my-popup-link’, event_popup);
  // … other onload statements
  }
  );

  　　如果你想要给一个文档对象增加事件监听器，这个对象一定要存在于文档树中。当文档加载完毕，将触发window对象的一个load事件。这时我们可以确定文档的所有对象都被加载，我们使用listen给文档对象注册事件处理函数。

  listen是一个跨浏览器的addEventListener()的别名部署，它有三个参数：event， elem，func。为了获得elem对象，使用了getElem方法，这个方法也是Js Library中的函数，用来替代getElementById，它即可以获得对象的ID，也可以获得对象本身，也就是可以返回字符串，也可以返回对象。

  　　你会注意到e.currentTarget 和e.preventDefault，IE并不能实现，但是listen 的一个很有用的功能就是，在IE中，将会传递两个虚假的事件对象，来模拟上面的”e”，来实现e.currentTarget 和e.preventDefault。

  DOM 也疯狂

  　　通过ID给一个对象增加监听器，在需要弹出窗口很少的时候没有问题。当链接很多的时候，这种方式就会很繁琐。基于这种情况，推荐使用mlisten。

  　　mlisten和listen很类似，不同的是它操作的是一个对象列表，为列表中的每个对象增加监听器。这个列表可以是一个NodeList，或者一个对象数组，ID数组。下面是一个例子：

  mlisten(
  ‘click’,
  document.getElementById(’my-link-list’).»
  getElementsByTagName(’a'),
  event_popup
  );

  　　也可以通过classname来获得链接列表，使用Js Library中的getElementsByClass(className [, tagName [, parentNode]]):

  mlisten(
  ‘click’,
  getElementsByClass(’popup’,'a’),
  event_popup
  );

  　　这个函数在一个元素使用多个用空格分开的classname的时候也可以工作，因此你可以用一个classname定义元素的样式，另一个用来指示行为。记住这些操作都要在window.onload中。

  一个小问题

  　　在使用监听器的时候，我们不能传递参数给触发函数，这使我们不能为每个链接定义不同的弹出窗口样式？不是的，下面是解决方法。

  function event_popup_features(features) {
  return function(e) {
  link_popup(e.currentTarget, features);
  e.preventDefault();
  }
  }

  // onload…
  listen(
  ‘click’,
  ’some-link’,
  event_popup_features(’width=300,height=800′)
  );

  我们通过event_popup_features返回一个函数，这样就可以通过event_popup_features给link_popup传递参数了。

  示例文件
  原文：Accessible Pop-up Links from alistapart.com

  (to view associated entry please click here)

  可访问的JavaScript原则

  ( Javascript and Practical UE )
• JavaScript可以增强可用性但是不要依赖JavaScript

  Usability:容易使用。
  Accessibility:任何人都可以访问站点。

  　　使用JavaScript增强大多数用户的可用性，不要因此而给少数用户的可访问性带来负面影响。你可以退一步使用一个纯HTML页面或服务器端的方案来替代JavaScript带来的好处。

• 提供一个无JavaScript替代

  　　这并不意味着使用通常的noscript标记，多数情况下你可以脱离noscript标记。

• 避免貌似聪明的技巧

  　　不要使用滚动的或者经常动态变化的文本，这会使屏幕阅读器失去作用，这样视力障碍的人就无法访问了。
  　　避免使用闪烁的或持续移动的图片，这样会使用户无法集中注意力。更糟的是大块的闪烁区域会使用户产生反感情绪。

• 不要对用户浏览器卡油

  　　

  • 永远不要使用用户没有同意的弹出窗口。
  • 不要调整窗口尺寸或移动窗口。
  • 如果要弹出窗口，事先告知用户。
  • 不要关闭弹出窗口的缩放和滚动条功能。
• 考虑不同残障人士的需求。