检测DOM中的更改

我想执行一个函数时，一些div或输入被添加到html。这可能吗?

例如，添加了一个文本输入，然后应该调用函数。

当前回答

使用TrackChanges来检测html更改。链接:https://www.npmjs.com/package/track-changes-js

例子

 let button = document.querySelector('.button');

 trackChanges.addObserver('buttonObserver', () => button);
 
 trackChanges.addHandler('buttonObserver', buttonHandler);

 function buttonHandler(button) {
   console.log(`Button created: ${button}`);
 }

2021-07-16 12:40:50

其他回答

或者你可以简单地创建你自己的事件，到处运行

 $("body").on("domChanged", function () {
                //dom is changed 
            });


 $(".button").click(function () {

          //do some change
          $("button").append("<span>i am the new change</span>");

          //fire event
          $("body").trigger("domChanged");

        });

完整的示例 http://jsfiddle.net/hbmaam/Mq7NX/

2014-03-06 06:30:44

如何为这个扩展jquery ?

   (function () {
        var ev = new $.Event('remove'),
            orig = $.fn.remove;
        var evap = new $.Event('append'),
           origap = $.fn.append;
        $.fn.remove = function () {
            $(this).trigger(ev);
            return orig.apply(this, arguments);
        }
        $.fn.append = function () {
            $(this).trigger(evap);
            return origap.apply(this, arguments);
        }
    })();
    $(document).on('append', function (e) { /*write your logic here*/ });
    $(document).on('remove', function (e) { /*write your logic here*/ });

Jquery 1.9+已经建立了对此的支持(我听说没有测试过)。

2017-02-13 09:24:21

8年后，这是我使用MutationObserver和RxJS的解决方案

observeDOMChange(document.querySelector('#dom-changes-here'))
  .subscribe(val => log('DOM-change detected'));

与其他方法的主要区别是在DOM更改时触发CustomEvent，并通过以下特性侦听事件的恢复以有效地执行用户逻辑;

撤消连续的DOM更改，以防止执行过多在给定的时间后停止观看在停止监视DOM更改后删除事件侦听器/订阅者观察一个框架(比如Angular)中发生的DOM变化是很有用的

import { fromEvent, timer} from 'rxjs';
import { debounceTime, takeUntil, tap } from 'rxjs/operators';

function observeDOMChange(el, options={}) {
  options = Object.assign({debounce: 100, expires: 2000}, options);

  const observer = new MutationObserver(list =>  {
    el.dispatchEvent(new CustomEvent('dom-change', {detail: list}));
  });
  observer.observe(el, {attributes: false, childList: true, subtree: true });

  let pipeFn;
  if (options.expires) {
    setTimeout(_ => observer.disconnect(), options.expires);
    pipeFn = takeUntil(timer(options.expires));
  } else {
    pipeFn = tap(_ => _); 
  }

  return fromEvent(el, 'dom-change')
    .pipe(pipeFn, debounceTime(options.debounce));
}

在stackblitz演示。

2021-10-02 03:30:12

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

完整解释:https://stackoverflow.com/a/11546242/6569224

2020-11-23 10:48:22

在2022年发现了这个问题的解决方案。

我们已经看到了不同的解决方案，主要涉及MutationObserver。

如果有人想记录DOM更改并存储它们以便一段时间后重播，他们可以使用rrweb

编辑:

再举个例子，下面是一些提示:

rrweb您可以通过CDN或npm使用

让我们以CDN为例来记录DOM更改事件:

步骤1:只需在<HTML><head>标签中包含以下脚本标签

步骤2:并在代码中添加以下代码以捕获rrweb生成的事件。

<script>
var events = [];
rrweb.record({
    emit(event) {
       events.push(event);
       // you can store this event anywhere and you can replay them later. ex: some JSON file, or DB
    }
});

</script>

这个例子主要用于记录任何web应用程序的事件。

如需详细了解(如何录制/回放)，请参阅rrweb文档。

重播的例子:

这是为了调试，但添加在这里，以便任何人都可以检查重放的一面:

重复的例子

2022-09-19 11:37:03

检测DOM中的更改

推荐文章

最新文章

标签