Javascript - Behavioral Separation

之前在 組織長列表 一文中有用 Javascript 來達到動態改變網頁內容的目的。以下是當時用到的程式碼。

<ul id="researchList">
<li id="lpv_comment_tag">
    <a href="javascript:fold('lpv_comment')">lpv_comment</a></li>
<li id="descriptor_tag">
    <a href="javascript:fold('descriptor')">descriptor</a></li>
<li id="kyp_tag">
    <a href="javascript:fold('kyp')">kyp</a></li>
<li id="wp_tag" class="active">
    <a href="javascript:fold('wp')">wp</a></li>
</ul>

這是我第一次成功地嘗試用 Javascript 來達成自己的想法， 不管程式碼寫得多爛，只要可以動，我就滿意了。 直到看到了 A List Apart 的 Behavioral Separation。 我才發現之前的程式碼可以改成

<ul id="researchList">
<li id="lpv_comment_tag">
    <a href="#">lpv_comment</a></li>
<li id="descriptor_tag">
    <a href="#">descriptor</a></li>
<li id="kyp_tag">
    <a href="#">kyp</a></li>
<li id="wp_tag" class="active">
    <a href="#">wp</a></li>
</ul>

不過要在網頁 onload 的時候動一點手腳，後面會再說明。 從上一段程式碼可以看到 <a> 裡面的 javascript: 不見了， 這使得 (X)HTML 的原始碼更容易閱讀， 而且日後想修改 Javascript 的時候，就不用動到這部分的原始碼，容易維護。 我利用 addLoadEvent 在網頁啟動的時候載入以下程式碼

var nav = document.getElementById("researchList");
var elem  = nav.getElementsByTagName("li");
for (var i = 0; i < elem.length; i++) {
   var e = elem[i].getElementsByTagName("a");
   e[0].onclick = fold;
}

上一段主要就是將 fold 這個函式指定給 researchList 中 <a> 的 onclick 這個事件處理器。 最後的網頁在 research.html 而之前的網頁是在 research_0616.html。 兩個網頁看起來是一樣，不過原始碼可是差很多。

PS. 其實改寫的時候我一直卡在如何傳遞函式的參數

<li id="lpv_comment_tag">
    <a href="javascript:fold('lpv_comment')">lpv_comment</a></li>

以上原來的寫法實在很愚蠢，都已經知道 parentNode 的 id 是 "lpv_comment_tag" 了， 還需要傳入 "lpv_comment" 當作函式的參數嗎？ 我知道可以使用 this 可是不太清楚怎麼用，直到看到 ppk 的 說明， 才恍然大悟，很快地完成了改寫。