js事件委托

事件委托：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。其中包括click，mousedown，mouseup，keydown，keyup，keypress，以click为例：

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

传统写法：

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.wrox.com";
});

EventUtil.addHandler(item2, "click", function(event){
    document.title = "我修改了document的标题"
});

EventUtil.addHandler(item3, "click", function(event){
    alert("hi");

});

事件委托写法：

var list = document.getElementById("myLinks");

    EventUtil.addHandler(list, "click", function(event){
        event =event|| window.evnet;
        var target = event.target || event.srcElement;

        switch(target.id){
            case "doSomething":
                document.title = "I changed the document's title";
                break;   
            case "goSomewhere":
                location.href = "http://www.wrox.com";
                break
            case "sayHi": 9alert("hi");

                               break; }

            });

其中EventUtil.addHandler见https://blog.csdn.net/qq_22091941/article/details/82120208

使用事件委托的优点：

1、document对象很快就可以访问，而且可以在页面生命周期的任何时间点为他添加事件处理程序。无需等待load事件

2、在页面中设置事件处理程序所需的时间更少了

3、整个页面占用的内存空间更少，能够提升整体性能