JavaScript事件委托

先学习一篇文章：http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/

1.为什么出现事件委托

当需要为N多元素都绑定事件时，如果单独绑定每一个元素，会影响网页性能。

所以事件委托出现了：仅仅通过在父级元素上（比如document）注册（绑定）事件，然后通过冒泡（也可以是捕获）来把事件传递到该父级元素然后执行事件处理函数。

事件处理函数中通过event.target可以判断被点击的元素，然后就可以对它进行处理。

2.事件委托原理及实现

概念上面已给出，思考为什么事件委托就可以优化网页性能？

将之前需要在每一个元素绑定一个事件处理程序通过使用事件委托变成只在父元素上绑定一个事件处理程序。

我们知道函数是对象，没声明一个函数，就会在内存的堆中分配一段空间给这个函数对象，这样来看，事件委托势必使用的内存减少了。

如何实现呢？

事件委托是借助事件可以通过冒泡或捕获传递来实现的。

3.应用场景

1）别人提出了一个问题。

如果我有一个页面，里面1000个元素都要绑定click事件，请问你要怎么做

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>
<script>
    document.onclick = function(event){
        //IE doesn't pass in the event object
        event = event || window.event;

        //IE uses srcElement as the target
        var target = event.target || event.srcElement;

        switch(target.id){
            case "help-btn":
                openHelp();
                break;
            case "save-btn":
                saveDocument();
                break;
            case "undo-btn":
                undoChanges();
                break;
            //others?
        }
    };

4.很多js库都有使用事件委托机制

如jquery、YUI等。

后续继续学习Jquery中事件委托的使用。

6.nicholas使用的是DOM0级事件绑定，根据之前的测试貌似dom0上注册的事件处理程序都是在冒泡阶段触发，

所以我的疑惑是DOM0级事件流是怎样的？