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

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

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

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

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

分析一下連接元素的一般特點(diǎn)：

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

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

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

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

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

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

好了，又要告一段落了，下一篇文章的主題還沒定，估計(jì)是再來一個(gè)實(shí)例或者另開一個(gè)主題，敬請(qǐng)期待。

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

最新評(píng)論