2

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

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

(i) 附在document.onload(). 它可能需要一段时间才能发生，如果它发生那么它并不理想

(ii) 检查 DOM 元素的存在

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

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

编辑：我忘了提，我不想使用 jQuery 并且希望在<head>不触及<body>所有页面的情况下将我的脚本放在

EDIT2：我这样做的原因是跟踪某些元素的正确加载并监视它们需要多长时间才能加载以及它们是否正确加载。

4

3 回答 3

1

您可以尝试事件委托..

将单击事件附加到文档，并检查要在其上运行函数的元素。

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 !!")
};
于 2013-01-10T19:16:42.677 回答
0

经过一番研究，我认为没有更好的通用方法。对两者都有轻微的改进：document.onload()定期检查（保留一个变量以确保我不会做两次）。

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

于 2013-03-02T21:30:39.770 回答
0

MutationObserver 是现代浏览器提供的用于检测 DOM 变化的 Web API。通过该API，可以监听新添加或删除的节点、属性变化或文本节点文本内容的变化。

你可以在这里阅读更多 https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401

于 2019-08-16T05:30:40.903 回答