javascript事件委托练习

JavaScript事件代理是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就不需要为每一个元素添加或者删除事件处理器，从而避免了内存泄露或者是遍历节点造成的性能下降。

如果整个页面都采用同样事件流方式，当红色蓝色区域触发相同事件，冒泡法：先处理蓝色区域请求，捕获法：先处理红色区域请求

如果不同层的元素使用的useCapture不同，会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling(冒泡)模式的事件。（先捕获后反向冒泡）

练习如下（考虑绑定方式兼容性问题，但不确定是否正确，欢迎探讨）

function delegateEvent(element, tag, eventName, listener) {
    // your implement
    var wrapId=document.getElementById("element");//定位包裹层
    if(wrapId.addEventListerner)//IE8+及Firefox、chrome
    {
        wrapId.addEventListerner("eventName",function(ev){
            var e=window.event||ev;
            var target=e.target||e.srcElement;
            if(target.nodeName.toLowerCase==tag)
                listener(e);//事件对象传递给listener
        },false)//冒泡,true为捕获

    }
    if(wrapId.attachEvent)//IE低级版本只能用此方法绑定
    {
        wrapId.attachEvent("on"+"eventName",function(ev){
            var e=window.event||ev;
            var target=e.target||e.srcElement;
            if(target.nodeName.toLowerCase==tag)
                listener(e);//事件对象传递给listener
        })//冒泡
    }

}

$.delegate = delegateEvent;

// 使用示例
<ul id="list">
    <li id="item1">Simon</li>
    <li id="item2">Kenner</li>
    <li id="item3">Erik</li>
</ul>
<button id="btn">Change</button>
// 还是上面那段HTML，实现对list这个ul里面所有li的click事件进行响应
$.delegate($("#list"), "li", "click", clickHandle);

参考：

http://www.cnblogs.com/leo388/p/4461579.html

http://www.itxueyuan.org/view/5225.html