什麼是添加點擊監聽器到我的JavaScript標籤欄的最佳方式是什麼？

Question

我打算在JavaScript中實現一個標籤欄模塊。

我想創建一個的TabBar每次頁面加載時間，然後放兩個標籤進去。

問題是，將點擊事件添加到我的標籤頁的最佳方法是什麼？

這裏是我的代碼：

// A tab in tab bar. 
Tab = function(titleID, contentID) { 
    this.title = document.getElementById(titleID); 
    this.content = document.getElementById(contentID); 
} 

Tab.prototype.show = function() { 
    this.title.className = "title-bg-active"; 
} 

Tab.prototype.hide = function() { 
    this.title.className = ""; 
} 


// Tab bar contains several tabs. 
TabBar = function() { 
    this.tabs = []; 
} 

TabBar.prototype.add = function(tab) { 
    // TODO add click listener to tab 
    this.tabs.push(tab); 
} 

TabBar.prototype.open = function(tab) { 
    for(var i = 0; i < this.tabs.length; i++) { 
    if(tab.title == this.tabs[i].title) { 
     tab.show(); 
    }else{ 
     tab.hide(); 
    } 
    } 
} 

window.onload = function(){ 
    tb = new TabBar(); 
    tb.add(new Tab("famous", "famous-content")); 
    tb.add(new Tab("recently", "recently-content")); 
} 

我真的不想使用jQuery或任何其他庫，謝謝！

編輯：
我還需要通知其他選項卡關閉，我該怎麼辦，在onclick？我認爲該標籤應該保留一個tabbar，但是如何？

Answer 1

裏面的標籤構造函數中添加this.title.onclick = this.onclick，然後在原型的onclick定義：

Tab.prototype.onclick = function(event) { 
    // handle click 
    // 'this' will hold the clicked element 
} 

---

考慮您的更新，這可能是工作：

TabBar.prototype.add = function(tab) { 
    var bar = this; 
    tab.title.onclick = (function(clickedTab){ 
     return function() { 
      // Hide all tabs 
      for(var i=0; i<bar.tabs.length; i++) { 
       bar.tabs[i].hide(); 
      } 

      // Show clicked tab 
      clickedTab.show(); 
     } 
    }(tab)); 
    this.tabs.push(tab); 
}