javascript - 对稍后创建的元素使用 addListener

Question

尝试此操作时出现错误“.addListener 不是函数”:

if(document.getElementById("id")){
   document.getElementById("id").addListener('click', function(){alert("ok");});
}

这个元素“id”在整个文档加载时出现，我在文档构建过程中使用它。所以，我这样做了:

window.onload = function(){
                if(document.getElementById("id")){
                   document.getElementById("id").addListener('click', function(){
                   alert("ok");
                   });
                }
}

错误现已消失，但元素“id”在被单击时不执行任何操作。
如何使其可点击？

Answer 1

听起来您可能多次分配给 window.onload 。如果您这样做，则只有分配给它的最后回调才会运行。请改用 addEventListener，以便之前对 onload 的分配不会与后续对 onload 的分配发生冲突。

您还可以监听 DOMContentLoaded 而不是 load，从而允许更快地附加监听器:

window.addEventListener('DOMContentLoaded', function(){
  const elm = document.getElementById("id");
  if(!elm){
    return;
  }
  elm.addEventListener('click', function(){
    alert("ok");
  });
});

最好永远不要分配给 .on- 属性，除非您确定它永远不会再被分配(或者除非您确定它应该只有一个监听器)。