事件委託（event.target）

html部分

<div id="box">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>

傳統的作法就是以下面同樣，給每一個p添加一個事件處理程序：

var p1 = document.getElementById('p1');
p1.onclick = function(){
        alert('p1');
};
var p2 = document.getElementById('p2');
p2.onclick = function(){
        alert('p2');
};
var p3 = document.getElementById('p3);
p3.onclick = function(){
        alert('p3');
};

這樣添加單擊事件是沒有問題的，可是若是在一個複雜的頁面裏，對全部可單擊的元素都採用這種方式的話，那將會有數不清的事件處理程序。而解決的方案是從事件的處理機制方面入手，在這裏咱們利用事件冒泡。

事件冒泡：事件開始時有具體的元素接收，而後逐級向上傳播到較爲不具體的元素。

這句話的意思是，當你點擊一個元素的時候(假設這個元素有事件)，這個元素的事件會觸發，而後這個元素的父元素的事件接着觸發。事件會沿着DOM樹向上傳播，直到document對象。

藉助以上特性，咱們沒有必要給每一個元素都添加一個事件處理程序，而是改爲事件委託：

var box= document.getElementById('box');
box.onclick = function(event) {
    var id = event.target.id
    switch(id) {
        case 'p1':
            alert('p1');
            break;
        case 'p2':
            alert('p2');
            break;
        case 'p3':
            alert('p3');
            break;
    }
}

當咱們單擊p1的時候，p1沒有事件，可是單擊事件仍是會向上傳播，從而觸發box的單擊事件，在事件中經過event.target具體得知單擊的是哪一個元素，而後獲取id進行判斷。

使用這種技術的優勢：佔用內存更少，程序所需時間更少，結構清晰。