Javascript 将addListener用于稍后创建的元素

尝试此操作时，我收到一个错误“.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”在被单击时不会执行任何操作。

---

如何使其可单击？

由于元素稍后添加到dom中，因此不能以这种方式附加侦听器。 您应该做的是在文档上附加一个侦听器来“过滤”事件，这样以后在dom中添加的元素仍然能够触发事件。请尝试以下代码：

 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'id'){
          //do something
     }
 });

现在，每当在dom上单击任何内容时，此侦听器都将等待id为='id'的元素执行您的代码，否则它将不会执行任何操作。此方法称为

---

“活动代表团”，查询更多信息

由于元素稍后添加到dom中，因此不能以这种方式附加侦听器。 您应该做的是在文档上附加一个侦听器来“过滤”事件，这样以后在dom中添加的元素仍然能够触发事件。请尝试以下代码：

 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'id'){
          //do something
     }
 });

现在，每当在dom上单击任何内容时，此侦听器都将等待id为='id'的元素执行您的代码，否则它将不会执行任何操作。此方法称为

---

“活动代表团”，查询更多信息

听起来您可能多次分配到

窗口。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-

属性指定给它，除非您确定它永远不会被再次指定（或者除非您确定它应该只有一个侦听器）。

听起来您可能会多次指定给

窗口。onload

。如果执行此操作，则只会运行分配给它的最后一个回调。改为使用

addEventListener

，以便先前对

onload

的分配不会与以后对

onload

的分配冲突

您还可以侦听

DOMContentLoaded

而不是

load

，这样可以更快地连接侦听器：

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

---

最好不要在-属性上指定

。

属性，除非您确定它将永远不会被再次指定（或者除非您确定它应该只有一个侦听器）。

addListener

与

addEventListener

不同。您确定您的

窗口.onload

处理程序正在运行吗？正如错误已经指出的那样。没有像

.addListener（）

这样的东西，只有

.addEventListener（）

->Typo@CertainPerformance-我想这就是问题所在，window.onload不起作用…我正在尝试，如果我能做些什么，我会发布。@Andreas-是的，先生，这是打字错误。编辑了问题。问题仍然有“打字错误”

addListener

与

addEventListener

不同。您确定您的

窗口.onload

处理程序正在运行吗？正如错误已经指出的那样。没有像

.addListener（）

这样的东西，只有

.addEventListener（）

->Typo@CertainPerformance-我想这就是问题所在，window.onload不起作用…我正在尝试，如果我能做些什么，我会发布。@Andreas-是的，先生，这是打字错误。编辑了这个问题。这个问题仍然有“打字错误”，它很有效，先生。对JS来说非常陌生，觉得有点难。从您的回答中，我总结了这两件事-

1.

window.onload（）应该只使用一次（为了避免重新分配时发生冲突），window.addEventListener（）可以多次使用<代码>2。DOMContentLoaded应用于更快地附加侦听器。是的，所有这些都是正确的

load

将等待页面上的所有内容加载，包括图像和其他不必要的内容-

DOMContentLoaded

将在DOM完成初始填充后立即启动。它运行良好，先生。对JS来说非常陌生，觉得有点难。从您的回答中，我总结了这两件事-

1.

window.onload（）应该只使用一次（为了避免重新分配时发生冲突），window.addEventListener（）可以多次使用<代码>2。DOMContentLoaded应用于更快地附加侦听器。是的，所有这些都是正确的

load

将等待页面上的所有内容加载，包括图像和其他不必要的内容-

DOMContentLoaded

将在DOM初始填充完成后立即激发。非常感谢您建议和解释事件委派。非常感谢您建议和解释事件委派。