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

2024-09-06 12:43:46

字體：大中小

供稿：網(wǎng)友

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

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

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

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

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
上邊的例子給window.document綁定了一個點擊事件處理函數(shù)Links_Onclick，在里邊我獲取了事件來源對象，并且顯示它的innerHTML值，可以看出不管在IE還是在Firefox，點擊無憂腳本論壇1的時候會顯示"無憂腳本論壇1"，點擊無憂腳本論壇2的時候會無憂腳本論壇2，這下明白為什么我要大費周章講事件傳遞了吧？我們正是要利用這一點，實現(xiàn)文章標題所說的：將span元素模擬成連接元素。

上一篇：javascript編程起步（第四課）

下一篇：window.showModalDialog使用手冊