事件委托

页面上事件过多，影响页面的整体运行性能。因为，首先每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次必须事先指定所有事件处理程序，导致DOM访问次数变多，会延迟整个页面的交互就绪时间。

对事件过多的问题的解决方案就是事件委托。事件委托利用冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。我们可以为整个页面指定一个onclick事件处理程序，而不必为每个单击的元素分别添加事件处理程序。以下例子

<ul id="naiUl">
     <li id="naili0">夏目贵志</li>
     <li id="naili1">云雀恭弥</li>
     <li id="naili2">杀生丸</li>
</ul>

按照传统做法，添加三个事件处理程序：

var heart1= document.getElementById("naili0");
     EventUtil.addHandler(heart1,"click",function(event){
         alert("夏目友人帐")
     })
     var heart1= document.getElementById("naili1");
     EventUtil.addHandler(heart1,"click",function(event){
         console.log("家庭教师")
     })
     var heart1= document.getElementById("naili2");
     EventUtil.addHandler(heart1,"click",function(event){
        local.href="穿越时空的爱恋"
     })

使用事件委托，只需在DOM树中尽量最高层次上添加一个事件处理程序：

var list =document.getElementById("naiUl");
     EventUtil.addHandler(list,"click",function(event){
        event= EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        switch(target.id){
            case "naili0":
                alert("夏目友人帐");
                break;
            case "naili1":
                console.log("家庭教师");
                break;
            case "naili2":
                local.href="穿越时空的爱恋";
                break;
        }
     })

在上面例子中，用事件委托只为ul元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且他们的事件会冒泡，所以单击事件最终会被这个函数处理。例子中，事件目标是被单击的列表项，故而可以通过检测id属性进行对应的操作。

最合适采用事件委托技术的事件包括click、mousedown、mouseup、 keydown、keyup、keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理他们并不容易，二七人经常需要计算元素位置。（因为鼠标从一个元素移到其子节点后者鼠标移出该元素时，都会触发moseout事件。)

---

vue中事件委托