javascript - 在 'ElementHasChildren' 事件

Question

我使用的网站有一个内置的用户表单。用户窗体包含多个下拉列表。在运行时(在“DOMContentLoaded”上)，所有下拉列表都不包含任何数据。打开 DDL 时，我假设运行了一些 Javascript 以将列表加载到页面中。

元素:

<ul class='hidden' data-bind='template: { name: 'childTreeTemplate', foreach: Kids }' style='display:block;'></ul>

在 'opening' 之后变成一个包含 3 个元素的列表:

<ul class='hidden' data-bind='template: { name: 'childTreeTemplate', foreach: Kids }' style='display:block;'>
    <li class='treeItem'>...</li>
    <li class='treeItem'>...</li>
    <li class='treeItem'>...</li>
</ul>

我可以设置事件来检测吗？

我已经尝试过的事情:

document.getElementsByTagName('ul')[1].addEventListener('DOMContentLoaded', function () {
    alert('Content Loaded')
});

document.getElementsByTagName('ul')[1].addEventListener('onchange', function () {
    alert('Changed')
});

document.getElementsByTagName('ul')[1].addEventListener('onload', function () {
    alert('Loaded')
});

这些事件都不会在元素加载时触发(我可能误解了它们的用法)...

Answer 1

您可以使用 MutationObserver :

MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

var target = document.getElementById( 'parent' );

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type==='childList') {
    	alert( 'added!' );
      return false;
    }
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

document.getElementById( 'parent' ).appendChild( document.createElement( 'li' ) );

<ul id="parent" style='display:block;'>

</ul>

演示:https://jsfiddle.net/q5nytv0L/

过去我用过DOMNodeInserted ，但已弃用:

document.getElementById( 'parent' ).addEventListener( 'DOMNodeInserted', function ( event ) {    
    if( event.target.parentNode.id == 'parent' ) {
        alert( 'added!' );        
    };
    
}, false );


document.getElementById( 'parent' ).appendChild( document.createElement( 'li' ) );

<ul id="parent" style='display:block;'>

</ul>