我们再来分析一下方法二：方法二的原理是 元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递；
既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理呢？答案是可以的，下面通过给body 元素添加事件监听，然后通过判断event.target 然后对不同的target产生不同的行为。
将方法二的代码重构一下：
<script type="text/javascript"> window.onload = function() { document.getElementById("body").addEventListener("click",eventPerformed); } function eventPerformed(event) { var target = event.target; switch (target.id) { case "span": alert("您好，我是span。"); break; case "div1": alert("您好，我是第二层div。"); break; case "div2": alert("您好，我是最外层div。"); break; } } </script>
结果会是点击不同的元素，只弹出相符合的提示，不会有多余的提示。
通过以上方式，我们把本来每个元素都要有的处理函数，都交给了其祖父节点body 元素来完成了，也就是说，span,div2,div1 将自己的响应逻辑委托给body，让它来完成相应逻辑，自己不实现相应逻辑，这个模式，就是所谓的事件委托。
下面是一个示意图：
关于事件代理的问题，以后继续探讨。