JavaScript事件委托的详细介绍（附代码）(2)-木庄网络博客

例如，当新员工丁来到公司后：

...
<input type="button" id="btn" value="添加新员工">
...
 
...
/*程序3*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    var aLi = document.createElement("li");
    oLi.innerHTML = "员工丁";
    aUl.appendChild(aLi);
}
...

在不使用事件委托的程序中，新增的员工丁是没有事件的，我们需要用一个函数包含住程序1：

/*程序4*/
function pro1() {
    var aUl = document.getElemengtByID("前台工作人员");
    var aLi = aUl.getElemengtsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function() {
            收取快递;
        }
    }
}

然后在新增新员工丁的程序的末尾执行这个函数：

/*程序5*/
var aBtn = document.getElementById("btn");
aBtn.onclick = function() {
    ...
    pro1();
}

这样做的缺点是显而易见的：DOM节点交互次数成倍增加。
若我们采用事件委托机制来实现，就不会存在这个问题，子元素节点的onclick事件会直接在父元素节点得到执行。

到这里，我们会想到：对于同一种事件来说，使用事件委托将其放置在父元素节点上固然很方便。但如果对于不同的子元素节点要执行不同的事件呢，还能使用事件委托吗？

答案是肯定的。

例如上述三位公司员工，总是使用固定品牌的快递：

员工甲因为便宜，喜欢使用申通快递，申通只送到园区大门;
员工乙是京东会员，总是购买京东自营商品，京东快递送到楼下;
员工丙是顺丰VIP，顺丰快递会送到送到所在楼层大厅。

他们三位在接到电话后，前台工作人员需要去不同的地方取件，对于不使用事件委托的程序，需要对每个人设置独特的处理事件：

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");
 
A.onclick = function() {
    去园区大门取快递；
}
B.onclick = function() {
    去楼下取快递；
}
C.onclick = function() {
    去本层大厅取快递；
}

至少需要三次DOM操作，而且为每一个对应节点都设置了事件函数。

而若采用事件委托：

var aUl = document.getElemengtByID("前台工作人员");
aUl.onclick = function (ev) {
    var target = ev || window.event; /*兼容浏览器*/
    var target = ev.target || ev.srcElement; /*兼容浏览器*/
    if (target.nodeName.toLocaleLowerCase() == "li") {
        switch(target.id) {
            case "A" :
                去园区大门取快递;
                break;
            case "B" :
                去楼下取快递;
                break;
            case "C" :
                去本层大厅取快递;
                break;
        }
    }
}