js 事件委托

今天又看到了这段代码，闲来无事，好好研究一下，也算开始了我的js学习之路（必须感谢老公的一起学习，用他的编程思想和我一起研究js...）

要理解事件委托，首先必须知道事件冒泡的思想。下文为转载的自己认为理解起来比较清楚的一篇文章。

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

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>

其中包含3个被单击后会执行操作的列表项。按照传统的做法，需要像下面这样为它们添加3个事件处理程序：

var EventUtil = {
    addHandler: function (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;
        }
    }
};

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething")
var item3 = document.getElementById("sayHi");

EventUtil.addHandler(item1, "click", function (event) {
    location.href = "http://www.w3cmm.com";
});
EventUtil.addHandler(item2, "click", function (event) {
    document.title = "我改变了文档的标题"
});
EventUtil.addHandler(item3, "click", function () {
    alert("hi");
});

如果在一个复杂的Web引用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM树中尽量最高层次上添加一个事件处理程序，如下面的例子所示：

var EventUtil = {
    addHandler: function (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;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    }
};

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    switch (target.id) {
    case "goSomewhere":
        location.href = "http://www.w3cmm.com";
        break;
    case "doSomething":
        document.title = "我改变了文档的标题";
        break;
    case "sayHi":
        alert("hi");
        break;
    }
});

在这段代码里，我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的节点，而且它们的事件会冒泡，所有单击事件最终会被这个函数处理。我们知道，事件目标是被单击的列表项，故而可以通过检测id属性来决定采取适当的操作。与前面未使用事件委托的代码比较，会发现这段代码的事件消耗更低，因为值取得了一个DOM元素，只添加了一个事件处理程序。虽然对用户来说最后的结果相同，但这种技术占有的内存更少。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。

如果可行的话，也可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与采取传统的做法相比具有如下优点。

• document对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待DOMContentLoaded或load事件）。换句话说，只要单击的元素呈现在页面上，就可以立即具备适当的功能。
• 在页面中设置事件处理程序所需要的时间更少。只添加一个事件处理程序所需要的DOM引用更少。
• 整个页面占用的内存空间更少，能够提升整体性能。

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