简易选项卡面向对象加事件委托方式实现

　　选项卡，都不陌生，今天把之前的代码翻出来重写了下。不多说了，直接上代码

<script>function Tab(){this.init.apply(this,arguments);}Tab.PRototype = {/*初始化方法获取html元素（视图）,并绑定事件*/init:function(){this.tab = document.getElementById('tab');this.tabs = tab.getElementsByTagName('li');this.contents = document.getElementById('content').getElementsByTagName('ul');for(var i=0;i<this.tabs.length;i++){this.tabs[i].index = i;}this.addListener(this.tab,'click',this.bind(this,this.showTab));},/*改变函数func的执行上下文*/bind:function(obj,func){return function(e){func.apply(obj,arguments);}},/*通用事件监听方法兼容w3c和IE*/addListener:function(ele,envtype,handler,isBubble){if(ele.addEventListener){ele.addEventListener(envtype,handler,isBubble);}else if(ele.attachEvent){ele.attachEvent("on" + envtype,handler);}else{ele["on" + enctype] = handler;}},/*选项卡的业务逻辑*/showTab:function(e){var event = e || window.event;var targetObj = event.target || event.srcElement;if(targetObj.nodeName == 'LI'){for(var i=0;i<this.tabs.length;i++){this.tabs[i].className = "";  }targetObj.className = 'current';for(var i=0;i<this.contents.length;i++){this.contents[i].style.display = 'none';}this.contents[targetObj.index].style.display = 'block';}}}window.onload = function(){new Tab();}</script>