事件代理(事件委托)的案例

将事件绑定在触发元素的父元素身上,触发元素即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会报错,这边有变量泄露的问题.
    }