事件委托简介

什么是事件委托？

事件委托就是利用事件冒泡。只指定一个事件处理程序，就可以管理某一类型的所有事件。

为什么需要使用事件委托？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

事件委托的原理

事件冒泡

事件委托实现例子

    <ul id='ul'>
        <li id='home'>首页</li>
        <li id='about'>关于我们</li>
        <li id='login'>登录</li>
    </ul>

    let ulDom = document.getElementById('ul')

    // 添加事件监听函数
    function addHandler(element, type, handler) {
        // 跨浏览器适配
        if (element.addEventListener) {
            element.addEventListener(type, handler, false)
        }else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
        }else {
            element['on' + type] = handler
        }
    }

    function proxy(e) {
       e = e ? e : window.event;

       // 返回事件的目标节点
       let target  = e.target || e.srcElement;
        
       // 根据不同点击，触发不同的操作
       switch(target.id) {
           case 'home':
                location.href = 'http://localhost:8000/home'
                break;
           case 'about':
               location.href = 'http://localhost:8000/about'
                break;
           case 'login':
               location.href = 'http://localhost:8000/login'
                break;
       }
    }

    addHandler(ulDom, 'click', proxy)


    /**
     * 使用事件委托只为ul标签添加了一个onClick事件处理程序。
     * 由于所有的列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。
     * 因为事件目标是被单击的列表项，故而可以通过检测id属性来决定适当的操作。
     * 因为只取得了一个DOM元素，只添加了一个事件处理程序。这种方式需要占用的内存更少。对用户来说结果相同
     * 所有用到的按钮的事件（鼠标事件和键盘事件）都可以采用事件委托技术
     * */