記一個MutationObserver的問題

http://www.cnblogs.com/dong-xu/p/7000139.html

看上面這篇文章的時候，看到有個例子是講MutationObserver的，非常費解，兩個元素，一父一子，父元素設置上observer，點擊子元素的時候，observer會觸發兩次，應該是事件冒泡了，沒問題，但是對子元素調用click()的時候，父元素的點擊回調也照樣執行，但是observer只觸發了一次，實在想不出這是什麼原理，模擬點擊的時候機制不一樣？有標記位？

<div class="outer">
    <div class="inner">inner</div>
</div>

var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

new MutationObserver(function() {
  console.log('mutate');
}).observe(outer, {
  attributes: true
});

function onClick1() {
  var a = Math.random();
  outer.setAttribute('data-random', a);
}

function onClick2() {
  var a = Math.random();
  outer.setAttribute('data-random', a);
}
// 原文是用同一個回調函數，我特地寫成了兩個
inner.addEventListener('click', onClick1);
outer.addEventListener('click', onClick2);
// 點擊和模擬點擊的結果不一樣
inner.click();