js中的事件委托

原理：事件委托，从名字上就能理解，就是自己的事情交给别人去做（将事件委托给别人）
实现方法：onclick,onmouseover,onmouseout等就是事件。委托，就是让别人来做。利用冒泡的原理，把事件加到父级上，触发执行效果。

假设我们有一个父元素div，里面有很多子元素，但我们关心的是里面的一个带有”classA” CSS类的A标记：

// 获得父元素DIV, 添加监听器...
document.getElementById("myDiv").addEventListener("click",function(e) {
    e=window.event?window.event:e;
    // e.target是被点击的元素
    if(e.target && e.target.nodeName == "A") {
        // 获得CSS类名
        var classes = e.target.className.split(" ");
        // 搜索匹配!
        if(classes) {
            // For every CSS class the element has...
            for(var x = 0; x < classes.length; x++) {
                // If it has the CSS class we want...
                if(classes[x] == "classA") {
                    // Bingo!
                    console.log("Anchor element clicked!");

                    // Now do something here....

                }
            }
        }

    }
});

事件委托的优点：假设有很多li元素（10000个），我们想为每一个li元素注册一个单击事件，当然你可以选择为每一个元素注册一个单击事件，可以利用循环遍历每一 个元素，这种想法最直接，最直观存在一个问题，这样的遍历操作势必会占用大量的资源。但是，如果我们利用冒泡原理，将事件委托给li元素的父级处理，这样不管多少个都能轻松搞定。