JQuery 關於事件委派與 stopPropagation

寫過 javascript 的人多少都會知道冒泡的原則，例如 click li，同時也會 click 到 ul，這個事件會一直往上傳遞。
但有時候我們不想讓 li 的 click 事件上傳遞，就會使用到 stopPropagation() 方法，例如：

 $('ul').on('click', function(event){
  console.log('this is ul.');
 });

 $('li').on('click', function(event){
  event.stopPropagation();

  console.log('this is li.');
 });

此時 li 的click 事件就不會往上傳遞，但如果我們使用 on 委派事件給父元素，stopPropagation() 方法就有一些值得提醒的潛規則：

 $('ul').on('click', function(event){
  console.log('this is ul.');
 });

 $('body').on('click', 'li', function(event){
  event.stopPropagation();

  console.log('this is li.');
 });

這時候 li 的 click 事件會一直傳遞到 body 才停止，因此點擊 li 同樣會觸發 ul 的 click 事件，因為事件委派的機制本身就依靠冒泡，這時候只需要稍微改變委派節點：

 $('ul').on('click', function(event){
  console.log('this is ul.');
 });

 $('ul').on('click', 'li', function(event){
  event.stopPropagation();

  console.log('this is li.');
 });

這時候 li 的 click 事件會冒泡到委派節點的上一層(此例中是 li)，不會在 ul 上冒泡。