為什麼要避免寫入程式碼 註冊事件… 再次老生常談一下 事件註冊的方式.

對於這個話題  以前我有寫過 一篇 隨筆  地址 是 ：

http://www.cnblogs.com/_franky/archive/2009/03/23/1420029.html

 

以前那篇沒有說透徹的東西 今天詳細的 說一說. 看 代碼 :

 

<button id ="btn1" onclick="do something ....">按鈕</button>

 

對於這個東西 以前說的更多的是 代碼寫入 html中 帶來的可維護性的問題 以及 行為和結構 不分離  帶來的緩衝利用率的問題. 今天說點別的

 

如果 你看過上一篇的話 應該知道 onclick 被賦予了一個 函數  各個瀏覽器下 這個函數名字不同  但作用 都是一個 即 click事件發生時 會去回調該函數....

 

但是 你可能沒注意的問題是  這個回調環境 他大概是這個樣子的 :

var btn = document.getElementById('btn1');

btn.onclick = function(event){

　　with(document){

     　　with(this){

　　　　　　//你的代碼在這裡.....

　　　　　　dom something ....

　　　　}

　　}

} 

 

也就是說 這個函數的 執行環境 中的 範圍鏈對象 的頂端 被先後放置了 document 對象和 this . 也就是  btn 

所帶來的問題 則是  你 的代碼 中 用到的所有變數 他大概需要 先到 btn 中去 找  找不到  再去 document 上找  然後才去 global

所以  即使 你  的代碼 是 window.....  這個效率也是讓人痛苦的.   而最要命的問題 則在於  考慮如下代碼...

 

btn.onclick = function(event){

　　var cookie = 1000;

　　with(document){

     　　with(this){

　　　　　　　alert(cookie);

　　　　}

　　}

} 

當btn.onclick 被回調時 你永遠列印不到 1000 而只會得到 document.cookie  所以 一但 你寫入程式碼環境中 的某個變數名 與 當前節點  或document 的成員 相同...則 可能會帶來 一些意外驚喜... 所以 還是請 放棄寫入程式碼 的時間註冊吧...寫 完全行為和結構 分離的 頁面... 為了效能 也為了別人  更為了你自己.....