记一个MutationObserver的问题

最新推荐文章于 2025-02-27 09:14:26 发布

vzhufeng

最新推荐文章于 2025-02-27 09:14:26 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/u011393161/article/details/80445722

javascript 专栏收录该内容

24 篇文章

订阅专栏

本文探讨了MutationObserver在DOM操作中的触发行为，特别是在点击事件和模拟点击事件中父元素和子元素之间的交互现象。通过具体示例展示了不同场景下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();