js 事件委托

事件委托

解决问题：如果页面上所有需要绑定事件的元素都单个绑定相应的事件处理程序，1、那么将会绑定很多单独的程序，全局内存占用很多，影响页面性能，2、访问DOM次数太多，延迟页面交互就绪时间

原理：利用事件冒泡，为顶级页面元素或者模块中最头部元素指定事件处理函数

html:

<div id="box">
    <ul id="list">
        <li id="one">1行</li>
        <li id="two">2行</li>
        <li id="three">3行</li>
    </ul>
</div>

js:

var ele = document.getElementById('box');
EventUtil.addHandler(ele, 'click', function (event) {
    var event = EventUtil.getEvent(event);
    // 获取发生事件的目标元素
    var target = EventUtil.getTarget(event);
    // 获取事件目标元素的id选择器名
    var id = target.id;
    // 根据不同的元素做不同的处理
    switch(id) {
        case 'box':
        {
            handler(event);
        }
            break;
        case 'list':
        {
            console.log(target);
        }
            break;
        case 'one':
        {
            target.style.color = 'red';
        }
            break;
        case 'two':
        {
            target.style.color = 'blue';
        }
            break;
        case 'three':
        {
            target.style.color = 'green';
        }
            break;
        default: break;
    }
});