Javascript 註冊事件淺析

首先是最常規的方法： <p id="para" title="cssrain demo!" onclick="test()">test</p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

當某一天，我們知道JavaScript要跟HTML結構實現分離後，就會改了一種寫法： <p id="para" title="cssrain demo!">test</p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

當我們工作越來越久後，有時候我們需要對某個元素繫結多個相同的事件類型： <p id="para" title="cssrain demo!">test</p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

如果按照上面的寫法，我們只能輸出第二個函數。
這時候我們需要用到attachEvent方法： <p id="para" title="cssrain demo!">test</p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

在一段時間內，你並沒發現這段代碼有任何錯誤。
某一天，一個名叫firefox的瀏覽器 闖入你的視野，當我們把這段代碼放到firefox中執行後，
發現並不能正常運行。 問題就這樣，越來越多，然而作為一名JS程式員，這些都是必須面對的。

為瞭解決這段代碼的平台相容性問題，我翻翻手冊，知道了firefox跟ie的區別：
firefox中註冊事件使用：addEventListener方法，同時為了相容ie，我們必須用到if ... else...<p id="para" title="cssrain demo!">test</p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

此時，代碼就可以在多個平台上工作了。

但隨著水平的進步，你不滿足每次都去判斷，你想把這個判斷封裝起來，以後可以直接調用： <p id="para" title="cssrain demo!">test</p><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

至此，作為一個程式員的工作就完了。
中間我們從一個最傳統，最基本的寫法 ， 然後實現Js和HTML的分離，然後又實現對同一個元素註冊多個事件，期間，我們發現註冊事件的相容性問題。最後我們對註冊事件的方法進行封裝，方便以後使用。

好了，文章寫到這裡。希望大家有收穫哦。。。