第 117 期(JavaScript-DOM)：监听页面DOM元素的插入

[wingmeng]

监听页面中 DOM 节点的插入是一个很实用的功能，例如我们可以在节点插入到页面之前对其进行初始化。

document.addEventListener('DOMNodeInserted', function(event) {
  console.log(event.target.nodeName.toLowerCase())
  console.log('type', event.type);        // 1:DOMNodeInserted
  console.log('element', event.target);      // 2:被添加的节点
  console.log('relate', event.relatedNode); // 3:被添加节点的父节点
});

需要注意的是 DOMNodeInserted 这类 mutation 事件在标准中已不赞成使用，推荐用 Mutation Observers 代替。

var observer = new MutationObserver(function(mutationsList) {
  mutationList.forEach(function(mutation) {
    switch(mutation.type) {
      case 'childList':
        /* 从树上添加或移除一个或更多的子节点 */

        break;
      case 'attributes':
        /* mutation.target 中某节点的一个属性值被更改 */
        break;
    }
  });
});

observer.observe(document.body, {
  childList:  true,  // 观察目标子节点的变化，添加或者删除
  attributes: true,  // 观察属性变动
  subtree:    true   // 默认为 false，设置为 true 可以观察后代节点
});