內部html在DOM樹中完全呈現后，將觸發哪個事件？

Question

我想知道當任何div的innerHtml屬性更改並且該div的樹的DOM完全加載到內存中時將觸發什么事件。

我想在觸發該事件后調用以下函數。 我想刪除以下函數中的setTimeout() hack，因為它有時可能會失敗。

private registerEventListenersForLink() {
  let _self = this;
  setTimeout(function () {
    var AElemList = document.querySelectorAll('.appmedia-content-wrapper a');
    for (let i = 0; i < AElemList.length; i++) {
      AElemList[i].addEventListener("click", function (event) {
        event.preventDefault();
        event.stopPropagation();
        var url = event.target["href"];
        if (url && url.trim() != '') {
          _self.utilService.openUrlExternaly(url);
        }
      });
    }
  }, 80);
}

我發現以下與上述問題相關的鏈接，但是我沒有任何想法：

確定何時加載innerHTML的事件

https://www.w3.org/html/wg/spec/apis-in-html-documents.html#dom-innerhtml

Answer 1

我已解決問題。 我已經實現了如下指令，它的工作就像一個魅力。 感謝Rory McCrossan將我指向MutationObserver api。

import { Directive, ElementRef } from '@angular/core';
import { UtilService } from '../../providers/util-service';

@Directive({
  selector: '[external-links]' // Attribute selector
})
export class ExternalLinks {
  private observer;
  constructor(private elRef: ElementRef, public utilService: UtilService) {
  }

  ngAfterViewInit() {
    var _self = this;
    this.observer = new MutationObserver(mutations => {
      mutations.forEach(function (mutation) {
        if (mutation.type == 'childList') {
          var AElemList = _self.elRef.nativeElement.querySelectorAll('a');
          for (let i = 0; i < AElemList.length; i++) {
            AElemList[i].addEventListener("click", function (event) {
              event.preventDefault();
              event.stopPropagation();
              var url = event.target["href"];
              if (url && url.trim() != '') {
                _self.utilService.openUrlExternaly(url);
              }
            });
          }
        }
      });
    });
    var config = { childList: true };

    this.observer.observe(this.elRef.nativeElement, config);
  }

}