将事件绑定在触发元素的父元素身上,触发元素即even.target,如果是点击事件,even.target就指向被点击的元素.
<div class="container">
<div class="titles">
<div class="title active">1</div>
<div class="title">2</div>
<div class="title">3</div>
<div class="title">4</div>
</div>
<div class="contents">
<div class="content active">one</div>
<div class="content">two</div>
<div class="content">three</div>
<div class="content">four</div>
</div>
</div>
function $(ele){
var e=null;
if(ele.charAt(0)==='#'){
e=document.querySelector(ele);
}
else{
e=document.querySelectorAll(ele);
}
return e;
}
var titlebox=$('.titles')[0];
// console.log(titlebox);
var titles=$('.title');
var contents=$('.content');
//循环取得触发者的索引
for(var count=0;count<titles.length;count++){
titles[count].index=count;
}
titlebox.onclick=function(event){
// console.log(event);
target=event.target||event.srcElement;//兼容性问题
for(var i=0;i<titles.length;i++){
titles[i].className="title";
contents[i].className='content';
}
event.target.className='title active';
contents[event.target.index].className='content active';//直接写i会报错,这边有变量泄露的问题.
}