可以用来监听Dom类名样式变化的方法： MutationObserver

Posted 2021-09-14 阿曾的奶油汤

使用情况

在最近的项目中，牵扯到了A项目中引用了B项目中的公共组件，比如顶部导航栏，cookie之类的，分别运用的不同的技术栈vue&jq，在不方便控制B项目中的点击事件时，监听Dom的class或style变化，而进行操作，使用到了MutationObserver

使用方法

参考MDN：MutationObserver的 observe() 方法配置了 MutationObserver 对象的回调方法以开始接收与给定选项匹配的DOM变化的通知。根据配置，观察者会观察 DOM 树中的单个 Node，也可能会观察被指定节点的部分或者所有的子孙节点。MutationObserver
mutationObserver.observe(target[, options])
target

DOM树中的一个要观察变化的DOM Node (可能是一个Element) , 或者是被观察的子节点树的根节点。

options 可选

一个可选的MutationObserverInit 对象，此对象的配置项描述了DOM的哪些变化应该提供给当前观察者的callback。

demo

$(\'button.a\').click(function(e) {
    e.preventDefault();
    $(\'body\').hasClass(\'test\')
      ? $(\'body\').removeClass(\'test\')
      : $(\'body\').addClass(\'test\');
  });
  $(\'button.b\').click(function(e) {
    e.preventDefault();
    $(\'body\').css(\'background-color\') == \'rgb(255, 100, 50)\'
      ? $(\'body\').css(\'background-color\', \'rgb(255, 200, 255)\')
      : $(\'body\').css(\'background-color\', \'rgb(255, 100, 50)\');
  });
  let testObserver = new MutationObserver(function(mutations) {
    mutations.forEach(mutation => {
      console.log(mutation.target);
    });
  });
  /**Element**/
  testObserver.observe($(\'body\')[0], {
    // subtree: true, // 所有下属节点（包括子节点和子节点的子节点）的变动
    attributes: true, //检测属性变动
    // childList: true, //检测子节点变动
    // characterData: true, //节点内容或节点文本的变动。
    attributeFilter: [\'class\', \'style\'], // 标签所带的属性都可添加，包括自定义属性
  });