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

2024-09-06 12:43:46

字體：大中小

來源：轉載

供稿：網友

作者：泣紅亭
在上一篇文章《面向事件驅動的編程》中我講了三種將事件綁定到元素的方法,而推薦使用第三種方法,即使用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元素模擬成連接元素。

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

下一篇：window.showModalDialog使用手冊