JScript|Event]面向事件驅動的編程(二)--實例講解:將span模擬成超連接

2019-11-21 02:20:34

字體：大中小

來源：轉載

供稿：網友

作者：泣紅亭
在上一篇文章《面向事件驅動的編程》中我講了三種將事件綁定到元素的方法,而推薦使用第三種方法,即使用attachEvent/addEventListener來綁定.上一篇文章的主旨是告訴大家如何使用事件,而這一篇文章的主旨是讓大家弄懂如何靈活應用事件來批處理某一類的對象行為.

首先講一講事件傳遞的概念.什么是事件傳遞?舉個現實的例子,有個人捏了一下你的手指,你可能會說他捏了你手指,也可能會說他捏了你的手,甚至可能會說他捏了你.事實上三種說法都沒錯,在瀏覽器事件的執行中亦有相似的情況,請看下邊的例子:

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上邊的例子給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。再看一個例子：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上邊的例子給window.document綁定了一個點擊事件處理函數Links_Onclick，在里邊我獲取了事件來源對象，并且顯示它的innerHTML值，可以看出不管在IE還是在Firefox，點擊無憂腳本論壇1的時候會顯示"無憂腳本論壇1"，點擊無憂腳本論壇2的時候會無憂腳本論壇2，這下明白為什么我要大費周章講事件傳遞了吧？我們正是要利用這一點，實現文章標題所說的：將span元素模擬成連接元素。

分析一下連接元素的一般特點：

1、有下劃線
2、鼠標移動上去會變成手型鼠標
3、點擊之后會進入某一個頁面(href屬性)
4、可以設置目標窗口的名稱(target屬性)

接下來一步一步實現上邊所舉的特點，首先是下劃線和鼠標移動上去會變成手型鼠標，這個很簡單，用ＣＳＳ即可，可以與腳本無關，請看示例：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

接下來是實現“點擊之后會進入某一個頁面”，可以給span元素增加一個屬性href保存url，同時處理它的onclick事件，這就要用到剛才我說了半天的事件傳遞，思路是給window.document對象綁定一個onclick處理函數，如果事件來源對象的標簽名（tagName）是span，它的class屬性值為link，并且它擁有一個非空href屬性，就調用window.open打開href屬性所保存的url。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

點擊上邊示例代碼所模擬出來的“連接”之后，瀏覽器會連接到無憂腳本論壇(http://www.51js.com)，第三個特點也實現了。在這里特別說明一下：Firefox不支持直接使用src.href獲取我們自定義的href屬性，因此使用了IE和Firefox都支持的getAttribute(attributeName)方法，如果不存在則返回null。

最后的工作是增加target屬性實現設置目標窗口的功能，要注意一點就是target屬性是可有可無的，實現方法很簡單，利用上邊的實例就可以輕松實現，就是在window.open那里做一點點手腳，請看示例代碼：

<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 id="iwvjtn8m0"    class="link" href="http://www.51js.com" target="_blank">無憂腳本1</span> <span id="iwvjtn8m0"    class="link" href="http://www.51js.com" target="_self">無憂腳本2</span> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

搞定！我們已經初步將擁有特定屬性的span元素模擬成了超連接元素，當然這里邊還大有文章可做，但這并不是重點，而且將span元素模擬成超連接并沒有什么實用價值，畢竟已經有那么好用的A元素可以供我們使用，所以要弄明白一點：搞清楚事件的傳遞，并且利用它為我們做一些本來很麻煩的工作，這才是本文的重點。

好了，又要告一段落了，下一篇文章的主題還沒定，估計是再來一個實例或者另開一個主題，敬請期待。

歡迎有興趣的同志支持一下無憂腳本論壇的原創行動，一起將您的原創文章貼出來與網友分享，還記得一篇文章里說過這樣的話：那些曾經幫助我們的人們，他們沒有想過要得到回報，如果硬要說有，那也是希望你能夠像他們那樣幫助需要幫助的人。

上一篇：JScript面向事件驅動的編程

下一篇：初學prototype,發個JS接受URL參數的代碼