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

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

上邊的例子給Input[type=button]、td、tr、tbody、table、body、html、document、window都設(shè)置了onclick事件處理函數(shù)，都是顯示當(dāng)前對象的id值，點擊之后IE會依次出現(xiàn)ButtonElement、TDElement、TRElement、TBODYElement、bodyObject、HTMLElement、documentObj，而Firefox則有一點不同，它顯示完documentObj之后還會顯示windowObj，而IE卻不會，這是因為IE的window對象沒有onclick事件。從這里可以看出這些對象都受到了點擊，執(zhí)行了onclick事件函數(shù)，而且順序是從事件來源對象一直往上傳直到window對象，這就是瀏覽器的事件傳遞。

如何對一類元素的事件進(jìn)行處理，這是本文的重點，而重點知識又在于事件的傳遞。從上邊的例子可以看出，不管是哪里的對象引發(fā)了一個事件，最后都會往上傳遞，我們要做的是在事件的必經(jīng)之路上處理它，建議使用window.document。再看一個例子：

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

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

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

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

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

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

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

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

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

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

最新評論