在 div 中的 insideHTML 的每次更改中添加事件监听器

Question

只是出于好奇，我想每次向这样的 div 添加 html 代码时都会收到一个事件

const xData = 40;

const container = document.querySelector('.container');

container.innerHTML = `<div class="container_Addons">${xData}</div>`;

container.addEventListener('i dont know',function(){
     console.log("you have just added some exotic stuff!");
});

for (i= 0; i<10;i++){
     container.innerHTML += `<div class="container_Addons">${i}st ${xData}</div>`;
};

每次添加 html 代码时让侦听器工作

Answer 1

使用 MutationObserver 可以很容易地观察元素的

childList

变化：

// Utility functions:
const el = (sel, par) => (par ||document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const repeat = (n, cb) => [...Array(n)].forEach((_, i) => cb(i));


// Task: watch content changes:

const xData = 40;
const container = el('.container');

const observeInsertion = new MutationObserver((records, observer) => {
  records.forEach(rec => {
    rec.addedNodes.forEach(node => {
      console.log(`Added some exotic stuff: ${node.textContent}`);
    })
  });
});

observeInsertion.observe(container, {
  childList: true
});

repeat(10, i => {
  const elAddon = elNew("div", {
    className: "container_Addons",
    textContent: `${i}st ${xData}`,
  });
  container.append(elAddon);
});

<div class="container"></div>

innerHTML

不断更改元素的完整内容，因此我选择了更合适的 Element.append() 方法 - 以便仅收到关于某个特定子插入的通知。您也可以使用

.innerHTML = 

代替

.append()

，但在这种情况下，您将不得不做额外的无用且复杂的工作来检测到底是 new 插入的内容。

Answer 2

您可以使用

MutationObserver

和

childList: true

来订阅特定的 DOM 更改：

const content = document.querySelector('#content');

const observer = new MutationObserver((mutationsList, observer) => {
  console.log(`innerHTML updated, ${ mutationsList.length } mutation${ mutationsList.length > 1 ? 's' : '' }`);
});

observer.observe(content, { childList: true });

for (let i = 0; i < 10; ++i){
   content.innerHTML += `<p>New element ${ i }</p>`;
};

setTimeout(() => {
  content.innerHTML += `<p>Added from setTimeout()</p>`;
})

setTimeout(() => {
  content.innerHTML += `<p>Added after 5 seconds</p>`;
}, 5000)

#content {
  padding-bottom: 67px;
}

#content > p {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin: 0;
  background: cyan;
  font-family: monospace;
  font-size: 32px;
}

#content > p + p {
  margin: 8px 0 0;
}

<div id="content">
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

但是请注意，您的

MutationObserver

的回调不会为执行更新

.innerHTML

的每个语句调用（因为它们可能会导致单次绘制，就像上面示例中

for

内的那些一样） ），但你可以从

mutationsList

获取更新元素的列表。

但是，如果在不同时间点添加新元素（如

setTimeout

中的元素），则每次更新都会调用您的回调。