事件委托

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

<div>
    <ul id="myLinks">
        <li id="doSomethine">doSomethine</li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="EventUtil.js"></script>
<script>
var list = document.getElementById('myLinks');
EventUtil.addHandler(list,"click",function (event) {
        event = EventUtil.getEvent(event);

        var target = EventUtil.getTarget(event);

        switch (target.id) {
            case "doSomethine":
                document.title = "changed";
                break
        }
    });

</script>

//兼容跨浏览器的事件对象
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;
        },

        preventDefault: function (event) {
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },

        removeHandler: function (element,type,handler) {
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false)
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type] = null;
            }
        },

        stopPropagation: function (event) {
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        },

        getCharCode: function (event) {
            if(typeof event.charCode == "number"){
                return event.charCode;
            }else{
                return event.keyCode;
            }
        }
    };

由于所以列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。