Question

我想在加载DOM元素时添加一个事件，但该元素可能还没有在DOM中。

我可以想到两个解决方案：

（i）将其附在document.onload()上。它可能需要一段时间才会发生，如果发生这种情况则不理想

（ii）用

检查DOM元素是否存在

window.setInterval(function() {
      if (document.getElementById("id"))  /* do stuff */
    }, 100);

这些都不是很优雅。有没有更好的解决方案？

编辑：我忘了提及，我不想使用jQuery，并希望在<head>中使用我的脚本而不触及所有页面的<body>

EDIT2：我这样做的原因是跟踪一些元素的正确加载并监视它们加载所需的时间以及它们是否正确加载。

Answer 1

您可以尝试事件委派 ..

将click事件附加到文档，并检查要运行该功能的元素..

document.onclick = function (event) {
  //IE doesn't pass in the event object
  event = event || window.event;

  //IE uses srcElement as the target
  var target = event.target || event.srcElement;
  var id = target.id;
  if( id === 'id'){
      clickEvent(id);
  }
};

function clickEvent(id){
  console.log("Elemennt with ID : " + id + "has been clicked !!")
};

Answer 2

经过一番研究，我认为没有更好的普遍方式。两者都略有改进：检查document.onload()并定期检查（保留变量以确保我不做两次）。

This page确认两者在正确加载DOM方面都是安全的。

Answer 3

MutationObserver是现代浏览器提供的Web API，用于检测DOM中的更改。使用此API，您可以侦听新添加或删除的节点，属性更改或文本节点的文本内容更改。

您可以在此处阅读更多内容 https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401

在元素加载之前添加事件，直到它在DOM中

3 个答案: