javascript - 如何在创建某个元素时对其进行操作

Question

很像实验 web components: custom html elements我想通过使用 div 和某些类并对它们执行操作来复制该行为。就像这样，我想在创建具有特定类的元素后立即对其执行某些操作。

例如:

<div class="api-list" data-api-link="api/users/1/posts" data-api-template="post-item.html">
    // List items
</div>

因此，javascript 应该检测到创建了“api-list”元素。 是否有在主体上添加事件处理程序以在“api-list”已添加到 dom 时触发事件之类的事情？

您可能会问，为什么不直接将其附加到元素上呢？我的网站是单页的，我使用ajax来注入(inject)内容，因此它需要动态加载内容。

Answer 1

Mutation Observer可以用来解决您的问题。 Browser support for Mutation Observer

您可以查看这个plunker ，我刚刚使用您的示例 api-list 创建的。

我们观察容器的childList中的任何变化，如果有变化，则循环这些变化并检查是否满足条件。

var divApiList = document.createElement('div');
divApiList.classList.add('api-list');
divApiList.textContent = '////////THE LIST////////';

var container = document.getElementById('container');
var counter = 1;
function addApiList (){
  var apiList = divApiList.cloneNode(true);
  apiList.textContent += counter;
  container.appendChild(apiList);
  counter++;
}

function addNonApiList() {
  var div = document.createElement('div');
  div.textContent = 'This is not api-list div';
  container.appendChild(div);
}

// This can be in different file
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    Array.prototype.forEach.call(mutation.addedNodes, function(node){
      if(node.classList.contains('api-list')) {
        alert('Api-List added');
      }
    });
  });    
});
 
// configuration of the observer:
var config = { childList: true, subtree: true };
 
// pass in the target node, as well as the observer options
observer.observe(container, config);
 
// later, you can stop observing
// observer.disconnect();

#container {
  border: 1px solid red;
}

<h1>Mutation are checked for the container below</h1>
<div id="container">
  <div>This is not api-list div</div>
  <div>This is not api-list div</div>
</div>
<button onclick="addApiList()">Add api-list</button>
<button onclick="addNonApiList()">Add NON api-list</button>

请注意:我从未在生产中使用过 Mutation Observer，所以我不确定使用它是否存在任何问题。如果有任何改进，请更正答案