事件委托

我们有1000个节点要添加click事件，这个时候我们怎么办?

对于事件处理程序过多问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
//js代码
var ul=document.getElementsByTagName("ul")[0];
    function alertInnerHTML(){
        ul.onclick=function(event){
            var event=event||window.event;
            var target=event.target||event.srcElement;
            if (target.nodeName=="LI") {
                alert(target.innerHTML)
            };          
        }
    }
    alertInnerHTML()

另一种事件委托的妙用

    //HTML
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    //JS代码，这里用到了上一节写的EventUtil对象
    EventUtil.addHandler(ul,"click",function(){
        event=EventUtil.getEvent();
        var target=EventUtil.getTarget();
        switch(target.innerHTML){
            case "A":
                alert("you got an A");
                break;
            case "B":
                alert("you got a B");
                break;
            case "C":
                alert("you got a C");
                break;
            case "D":
                alert("you got a D");
                break;
            default:
                alert("please click text");
        }
    },false)

与原始做法相比，事件委托能够管理更少的函数，减少了对DOM的调用，减少了内存的使用，最关键的一点就是我们在还是修改DOM的时候不需要考虑事件。

说到减少内存，我们在移除事件处理程序的时候，切记要将处理程序移除，btn.onclick=null；