1
2
3
4
5
6
7
8
<div class="box">

<div id="oDiv">
    <a href="javascript:;">点我</a>
    <span id="hh">awd</span>
</div>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// ============ 简单的事件委托
function delegateEvent(interfaceEle, selector, type, fn) {
    if(interfaceEle.addEventListener){
        interfaceEle.addEventListener(type, eventfn);
    }else{
        interfaceEle.attachEvent("on"+type, eventfn);
    }

    function eventfn(e){
        var e = e || window.event;    
        var target = e.target || e.srcElement;
        if (matchSelector(target, selector)) {
            if(fn) {
                fn.call(target, e);
            }
        }
    }
}
/**
 * only support #id, tagName, .className
 * and it's simple single, no combination
 */
function matchSelector(ele, selector) {
    // if use id
    if (selector.charAt(0) === '#') {
        return ele.id === selector.slice(1);
    }
    // if use class
    if (selector.charAt(0) === '.') {
        return (' ' + ele.className + ' ').indexOf(' ' + selector.slice(1) + ' ') != -1;
    }
    // if use tagName
    return ele.tagName.toLowerCase() === selector.toLowerCase();
}

//调用
var odiv = document.getElementById('oDiv');
delegateEvent(odiv,'a','click',function(){
    alert('1');
})
delegateEvent(odiv,'#hh','click',function(){
    alert('2');
})