[原创:JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接(页 1)

JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接

在上一篇文章[url=http://bbs.51js.com/viewthread.php?tid=50545]《面向事件驱动的编程》[/url]中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主旨是让大家弄懂如何灵活应用事件来批处理某一类的对象行为.

首先讲一讲事件传递的概念.什么是事件传递?举个现实的例子,有个人捏了一下你的手指,你可能会说他捏了你手指,也可能会说他捏了你的手,甚至可能会说他捏了你.事实上三种说法都没错,在浏览器事件的执行中亦有相似的情况,请看下边的例子:

[code]
<html id="HTMLElement" onclick="alert(this.id);">

<head>
<title>测试页面</title>
</head>

<body>
<table id="TABLEElement" onclick="alert(this.id);">
    <tbody id="TBODYElement" onclick="alert(this.id);">
        <tr id="TRElement" onclick="alert(this.id);">
            <td id="TDElement" onclick="alert(this.id);"><input type="button" id="ButtonElement" onclick="alert(this.id);" value="按钮" /></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
function Object_Onclick()
{
    alert(this.id);
}
window.id = "windowObj";
window.onclick = Object_Onclick;
window.document.id = "documentObject";
window.document.onclick = Object_Onclick;
window.document.body.id = "bodyObject";
window.document.body.onclick = Object_Onclick;
</script>
</body>
</html>
[/code]

上边的例子给Input[type=button]、td、tr、tbody、table、body、html、document、window都设置了onclick事件处理函数，都是显示当前对象的id值，点击之后IE会依次出现ButtonElement、TDElement、TRElement、TBODYElement、bodyObject、HTMLElement、documentObj，而Firefox则有一点不同，它显示完documentObj之后还会显示windowObj，而IE却不会，这是因为IE的window对象没有onclick事件。从这里可以看出这些对象都受到了点击，执行了onclick事件函数，而且顺序是从事件来源对象一直往上传直到window对象，这就是浏览器的事件传递。

如何对一类元素的事件进行处理，这是本文的重点，而重点知识又在于事件的传递。从上边的例子可以看出，不管是哪里的对象引发了一个事件，最后都会往上传递，我们要做的是在事件的必经之路上处理它，建议使用window.document。再看一个例子：

[code]
<html>

<head>
<title>测试页面</title>
</head>

<body>
<a href="http://www.51js.com" target="_blank">无忧脚本论坛1</a>
<a href="http://www.51js.com" target="_blank">无忧脚本论坛2</a>
<script type="text/javascript">
function Links_Onclick(e)
{
    var src = window.document.all != null ? e.srcElement : e.target; //获取事件来源对象
    alert(src.innerHTML);
}
if(window.document.all != null)
    window.document.attachEvent("onclick", Links_Onclick)
else
    window.document.addEventListener("click", Links_Onclick, false);
</script>
</body>
</html>
[/code]

上边的例子给window.document绑定了一个点击事件处理函数Links_Onclick，在里边我获取了事件来源对象，并且显示它的innerHTML值，可以看出不管在IE还是在Firefox，点击无忧脚本论坛1的时候会显示"无忧脚本论坛1"，点击无忧脚本论坛2的时候会无忧脚本论坛2，这下明白为什么我要大费周章讲事件传递了吧？我们正是要利用这一点，实现文章标题所说的：将span元素模拟成连接元素。

分析一下连接元素的一般特点：

1、有下划线
2、鼠标移动上去会变成手型鼠标
3、点击之后会进入某一个页面(href属性)
4、可以设置目标窗口的名称(target属性)

接下来一步一步实现上边所举的特点，首先是下划线和鼠标移动上去会变成手型鼠标，这个很简单，用ＣＳＳ即可，可以与脚本无关，请看示例：

[code]
<html>

<head>
<title>测试页面</title>
<style type="text/css">
span.link
{
    text-decoration:underline;
    color:blue;
    cursor: pointer;
}
</style>
</head>

<body>
<span class="link">无忧脚本1</span>
<span class="link">无忧脚本2</span>
</body>
</html>
[/code]

接下来是实现"点击之后会进入某一个页面"，可以给span元素增加一个属性href保存url，同时处理它的onclick事件，这就要用到刚才我说了半天的事件传递，思路是给window.document对象绑定一个onclick处理函数，如果事件来源对象的标签名（tagName）是span，它的class属性值为link，并且它拥有一个非空href属性，就调用window.open打开href属性所保存的url。

[code]
<html>

<head>
<title>测试页面</title>
<style type="text/css">
span.link
{
    text-decoration:underline;
    color:blue;
    cursor: pointer;
}
</style>
<script type="text/javascript">
function Document_Onclick(e)
{
    var src = window.document.all != null ? e.srcElement : e.target;
    if(src.tagName != null
        && src.className != null
        && src.getAttribute("href") != null
        && src.tagName.toString().toLowerCase() == "span"
        && src.className.toString().toLowerCase() == "link"
        && src.getAttribute("href").toString().length > 0)
    {
        window.open(src.getAttribute("href").toString());
    }
}
if(window.document.all != null)
    window.document.attachEvent("onclick", Document_Onclick);
else
    window.document.addEventListener("click", Document_Onclick, false);
</script>
</head>

<body>
<span class="link" href="http://www.51js.com">无忧脚本1</span>
<span class="link" href="http://www.51js.com">无忧脚本2</span>
</body>
</html>
[/code]

点击上边示例代码所模拟出来的"连接"之后，浏览器会连接到无忧脚本论坛(http://www.51js.com)，第三个特点也实现了。[color=red]在这里特别说明一下：Firefox不支持直接使用src.href获取我们自定义的href属性，因此使用了IE和Firefox都支持的getAttribute(attributeName)方法，如果不存在则返回null。[/color]

最后的工作是增加target属性实现设置目标窗口的功能，要注意一点就是target属性是可有可无的，实现方法很简单，利用上边的实例就可以轻松实现，就是在window.open那里做一点点手脚，请看示例代码：

[code]
<html>

<head>
<title>测试页面</title>
<style type="text/css">
span.link
{
    text-decoration:underline;
    color:blue;
    cursor: pointer;
}
</style>
<script type="text/javascript">
function Document_Onclick(e)
{
    var src = window.document.all != null ? e.srcElement : e.target;
    if(src.tagName != null
        && src.className != null
        && src.getAttribute("href") != null
        && src.tagName.toString().toLowerCase() == "span"
        && src.className.toString().toLowerCase() == "link"
        && src.getAttribute("href").toString().length > 0)
    {
        if(src.getAttribute("target") != null
            && src.getAttribute("target").toString().length > 0)
            window.open(src.getAttribute("href").toString(), src.getAttribute("target").toString());
        else
            window.open(src.getAttribute("href").toString());
    }
}
if(window.document.all != null)
    window.document.attachEvent("onclick", Document_Onclick);
else
    window.document.addEventListener("click", Document_Onclick, false);
</script>
</head>

<body>
<span class="link" href="http://www.51js.com" target="_blank">无忧脚本1</span>
<span class="link" href="http://www.51js.com" target="_self">无忧脚本2</span>
</body>
</html>
[/code]

搞定！我们已经初步将拥有特定属性的span元素模拟成了超连接元素，当然这里边还大有文章可做，但这并不是重点，而且将span元素模拟成超连接并没有什么实用价值，毕竟已经有那么好用的A元素可以供我们使用，所以要弄明白一点：搞清楚事件的传递，并且利用它为我们做一些本来很麻烦的工作，这才是本文的重点。

好了，又要告一段落了，下一篇文章的主题还没定，估计是再来一个实例或者另开一个主题，敬请期待。

欢迎有兴趣的同志支持一下无忧脚本论坛的原创行动，一起将您的原创文章贴出来与网友分享，还记得一篇文章里说过这样的话：那些曾经帮助我们的人们，他们没有想过要得到回报，如果硬要说有，那也是希望你能够像他们那样帮助需要帮助的人。

评论

发表评论

此博客中的热门博文

时间管理：每天挤出一小时

一位名叫富兰克林·费尔德的人曾精辟地说过这么一句话：成功与失败的分水岭可以用这么五个字表达——‘我没有时间’。 在当今这个生活节奏紧凑的年代里，人们似乎每天都没有充余的时间去做完想做的事，所以许多念头就此打消了。但世界上仍有许多人用坚持每天至少挤出一小时的时间发展自己的个人爱好。事实上我注意到，往往越是忙碌的人，他越能挤出这一小时。 当今世界上最大的化学公司——杜邦公司的总裁格劳福特·格林瓦特，每天挤出一小时研究蜂鸟（一种世界上最小的鸟），用专门的设备给蜂鸟拍照。权威人士把他写的关于蜂鸟的书称为自然历史丛书中的杰出作品。 休格·布莱克进入美国议会前，并未受过高等教育。他从百忙中每天挤出一小时到国会图书馆去博览群书，包括政治、历史、哲学、诗歌等方面的书，数年如一日，就是在议会工作最忙的日子里也从未间断过。后他成了美国最高法院的法官，这时他已是最高法院中知识极为渊博的人士之一。 我承认，要挤出这一小时并不容易，需要有决心和恒心。关键在于如何设法得到这一个小时，并且有效地利用它。 每个人的头脑都有能力去创造和想象，关键在于为自己寻找到机会。一位名叫尼古拉的希腊籍电梯维修工对现代科学很感兴趣，他每天下班后到晚饭前，总要花一小时攻读核物理学方面的书籍。随着知识的积累增多，一个念头跃入他脑海。1948年他提出了建立一种新型粒子加速器的计划。这种加速器比当时其它类型的加速器造价便宜而且更强有力。他把计划递交给美国原子能委员会作试验，又再经改进，这台加速器为美国节省了7000万美元。尼古拉得到了1万美元的奖励，还被聘请到加州大学放射实验室工作。 富兰克林·罗斯福在战争最艰苦的年代里，时常强迫自己挤出一小时集邮，借以摆脱周围的一切。已故的吉妮太太曾告诉我，总统那时经常去她管的那幢房子，把自己关在里面，摆弄着各色邮票。总统的时候脸色阴沉，心情忧郁，疲惫不堪。等到他走出屋子离去时，精神状态完全变了，变好了，似乎整个世界都变得明亮了。 要得到这样的收益，无论多大年纪的人都可以马上做起。我认识一位老人，他从78岁起每天抽出一小时学习欣赏音乐。他说：我很快就养成了这种习惯，每天听一小时的音乐。我要掌握欣赏音乐的能力，随着年岁增高，等到我不得不靠静坐度日时，就用得上它了。 一天安排出一小时静心，排除疲劳，即使看没有做出多大的事情，但我深信大多数人还是会觉得有收益的。至少他们在这段时间里可以理清头
阅读全文

你的妈妈已经等了二十几年

那天是周末，早就说好了要和朋友们去逛夜市，母亲却在下班时打来电话："明天我们公司去踏青，你下班时帮我到面包店买一袋椰蓉面包，我带着中午吃。" "踏青？"我发吃一惊，"啊，你们还去踏青？"想都不想，我一口回绝："妈，我跟朋友约好了要出去，我没时间。"跟母亲讨价还价了半天。她一直说："只是买一袋面包，快得很，不会耽误你……"最后她都有点生气了，我才不情愿地答应下来。 一心想着速战速决，刚下班我就飞奔前往，但是到了面包店一看竟是人山人海。想起朋友们肯定都在等我，我更是急得跺脚。真不知道母亲是怎么想的，周末不在家休息，还要去春游？春游，根本就是小孩子的事情嘛！ 售货员统计了每个人买的数量，算起来我是第三炉的最后一个。这时，背后有人轻轻叫一声："小姐。"我转过头去，是个不认识的中年妇人，我问："怎么了？"她说："小姐，我们打个商量好吗？你看，我只在你后面一个人，就得再等一炉。我这是给儿子买，他明天远足，我一会儿还得做饭送他去补习班。如果你不急的话，我想，嗯……" "请问你是帮谁买？"她轻声问。"给我妈买，她明天也要踏青。"当回答完时，我发现整个店突然有一种奇异的寂静，所有的眼光同时投向我。"哇，今天卖了好几百袋，你可是第一个买给妈妈的。"售货小姐笑着说。我一惊，环顾四周才发现，队伍里几乎全是女人，从白发苍苍到绮年少妇，每个人的大包小包，都注解着她们主妇和母亲的身份。 "那你们呢？""当然是给我们小皇帝的。"不知是谁接了口，大家都笑了。我身后那位妇女连声说："对不起！我真没想到，这家店人这么多，你都肯等。我本来都不想来的，是儿子一定要，我也希望让他吃好、玩好。我们小时候远足，还不就是想着要吃零食？" 她脸上忽然浮现出神往的表情，我问："您现在还记得小时候远足的事啊？"她笑了："怎么不记得？现在也想去啊，哪怕只在草坪上坐一坐晒晒太阳也好！可是总没时间。" 她轻轻叹口气，"大概，我之后等孩子长到你这么大的时候，才有机会吧！"原来是这样，踏青并
阅读全文

教您如何认识植柔皮，头层皮革，修面皮革，油蜡皮、水染皮、摔纹皮、纳帕皮、打蜡皮、压花皮、修面皮、漆光皮、磨砂皮、贴膜皮

#wiki 植柔皮：皮质的术语。   从皮革的档次来分：全粒面皮>半粒面皮>轻修面皮>重修面皮   从皮革的软硬来分：铬鞣皮>半植鞣皮>全植鞣皮(烤皮)   从皮革的风格做法来分：油蜡皮、水染皮、摔纹皮、纳帕皮、打蜡皮、压花皮、修面皮、漆光皮、磨砂皮、贴膜皮、印花皮、裂纹皮、反绒皮等。 真皮：真皮又有头层皮和二层皮区分。 头层皮是指带有粒面（真皮层）的牛、羊、猪皮等，皮面有自然特殊的纹路效果。二层皮没有真皮层，是纤维组织（网状层），经化学材料喷涂或覆上 PVC 、 PU 薄膜加工而成,因此，区分头层皮和二层皮的有效方法，是观察皮的纵切面纤维密度。头层皮由又密又薄的真皮层及与其紧密连在一起的稍疏松的网状层共同组成，具有良好的强度、弹性和工艺可塑性等特点。 再生皮：国外又名皮糠纸。将各种动物的费皮及真皮下脚料粉碎后，调配化工原料加工制作而成。其表面加工工艺同真皮的修面皮、压花皮一样，其特点是皮张边缘较整齐、利用率高、价格便宜；但皮身一般较厚，强度较差，只适宜制作平价公文箱、拉杆袋、球杆套等定型工艺产品和平价皮带，其纵切面纤维组织均匀一致，可辨认出流质物混合纤维的凝固效果。 人造革：也叫仿皮或胶料，是PVC和 PU 等人造材料的总称。它是在纺织布基或无纺布基上，由各种不同配方的 PVC 和 PU 等发泡或覆膜加工制作而成，可以根据不同强度、耐磨度、耐寒度和色彩、光泽、花纹图案等要求加工制成，具有花色品种繁多、防水性能好、边幅整齐、利用率高和价格相对真皮便宜的特点，但绝大部分的人造革，其手感和弹性无法达到真皮的效果；它的纵切面，可看到细微的气泡孔、布基或表层的薄膜和干干巴巴的人造纤维。 购买皮货防骗绝招，消费者须知 一 认准皮层：好多商家都理直气壮的对您承诺：“不是真皮的皮货，假一赔十”。这句话确实是真的，因为确实是真皮的，但不是头层皮的，所以他不敢说：“不是头层真皮的皮货，假一赔十”。因为市场上为了竞争，90%是二层皮，因为头层皮原料价格要贵的多，利润空间太小，所以利益驱使，都卖二层皮皮货。      小知识：一张原皮，可以剖若干层来用，不过，高贵、美观、耐用只属于头层皮，其它层皮无法比拟。国外市场高价大量收购头层皮，二层皮因为价格低廉，所有盛销国内 二 认轻修饰皮：皮革需要上浆，在浆的下面，就大有文章了。残皮修补术
阅读全文