js高程：事件委托

事件委托：
解决“事件处理程序过多”的方案。事件委托利用了事件冒泡，只指定一个事件处理程序，即只需在DOM树中尽量最高层次上添加一个事件的处理程序，就可以管理某一类型的所有事件。（例如ul中多个li，每个Li要有各自的点击事件，则可以使用事件委托只给ul添加一个事件处理程序，不必单独给每个li添加）。

//事件委托
//（1)封装EventUtil
		  var EventUtil={

        addHandler:function(element,type,handler){ //添加事件
            if(element.addEventListener){
                element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
            }else if(element.attachEvent){                    //使用IE方法添加事件
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;          //使用DOM0级方法添加事件
            }
        },

        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;
            }
        },

        getEvent:function(event){  //使用这个方法跨浏览器取得event对象
            return event?event:window.event;
        },

        getTarget:function(event){  //返回事件的实际目标
            return event.target||event.srcElement;
        }
    };

        //（2）事件委托
		var list=document.getElementById("links");
		EventUtil.addHandler(list,"click",function(event){
			event=EventUtil.getEvent(event);
			var target=EventUtil.getTarget(event);
			switch(target.id){
				case "li1":
					document.title="I change the document's title";
					break;
				case "li2":
					location.href="http://www.baidu.com";
					break;
				case "li3":
					alert("hi");
					break;
			}
		})

注意EventUtil要自己封装，不能直接调用。参考：https://blog.csdn.net/chen_enson_1/article/details/82878444
为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件，与传统做法相比的优点：
（1）document对象很快就可以访问到，而且可以在页面生命周期的任何时点上为它添加事件处理程序（无需等待DOMContentLoaded或load事件），即只要可单击的元素呈现在页面上，就可以立即具备适当的功能。
（2）在页面中设置事件处理程序所需的事件更少。值添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。
（3）整个页面占用的内存空间更少，能够提升整体性能。
最适合采用事件委托技术的事件：click、 mousedown、 mouseup、 keydown、 keyup、 keypress。虽然mouseover、 mouseout事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。