依賴於DOM節點的父子關係，事件的捕獲與冒泡都是在父子節點之間傳遞，使用者觸發事件後，首先進入捕獲階段，從最頂層的根節點(也就是window)開始依次詳細傳遞，直到查詢到事件發生源為止，然後進入事件冒泡階段，從事件發生源開始依次向上傳播事件，流程圖如下圖所示。
      

      註冊事件時，DOM元素監聽事件的捕獲階段還是冒泡階段，只能選擇其一，在d3的事件註冊中，由on方法的第三個引數(型別為boolean)決定。

      另外，需要補充的是，在事件傳播的過程中，如果事件傳播被手動終止(利用事件的stopPropagation方法)，則後續所有的事件傳播過程都不會發生，示例程式碼如下。

//  假定頁面中存在一個id為container的div元素
var datas = [{name : 'yiifaa'}, {name : 'yiifee'}];
d3.select('#container')
  .selectAll('button')
　.data(datas)
　.enter()
　//  
　.append('button')
　.classed('btn btn-default', true)
　.text(function (d) {
    　return d.name;
　})
　.on('click', function(d) {
    　var event = d3.event;
    　alert(d.name)
　}, false
 
);    //  因為沒有子節點，監聽事件的冒泡階段
　

      執行上面的程式碼，點選按鈕都會輸出節點繫結資料的name資訊，但有時我們希望父節點能處理子節點所有的業務邏輯，類似於建立代理，而不希望給每個子節點都單獨註冊事件，這樣一方面能更好地管理業務邏輯程式碼，另一方面還能顯著地提高程式碼效能。

d3.select('#container')
  .on('click', function() {
      var event = d3.event,
          target =  event.srcElement,   //  獲取事件發生源
          data = d3.select
 
(target).datum(); //  獲取事件發生源的資料
      if(data !== undefined) {
          alert('from parent:' + data.name);
      } 
      //    阻止事件向後傳遞
      event.stopPropagation();
  }, true); //  監聽捕獲階段

      新增上面的程式碼後，現在再次點選按鈕，只會輸出“from parent:”的類似資訊，而不會觸發按鈕節點自身的事件監聽函，這是因為父元素“#container”阻斷了事件傳播過程，並且是處於冒泡階段之前的捕獲階段。