JavaScrip事件委托

事件委托

事件委托利用了事件冒泡，只需在Dom树中尽量最高的层次上添加一个事件处理程序，就可以管理某一类型的所有事件。

例子：

<ul>
	<li id='demo1'>demo1</li>
	<li id='demo2'>demo2</li>
	<li id='demo3'>demo3</li>
</ul>

var Ul = document.getElementsByTagName('ul')[0]
Ul.addEventListener('click', function(event) {
    var target = event.target
    switch (target.id) {
        case 'demo1':
            console.log('demo1');
            break;

        case 'demo2':
            console.log('demo2');
            break;

        case 'demo3':
            console.log('demo3');
            break;
    }
})

*添加到页面上的事件处理程序数量直接关系到页面的整体性能，事件委托技术需要占用的内存更少，因此有利于提升性能。

*最适合采用事件委托技术的事件包括：click、mousedown、mouseup、keydown、keyup和keypress。而那些不支持冒泡的事件，例如 load、unload、scroll、resize、blur、focus、mouseleave、mouseenter等不能使用事件委托。

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。