记一个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();