将事件附加到尚未添加到 DOM 的对象答案

【问题标题】：Attaching event to an object not yet added to DOM将事件附加到尚未添加到 DOM 的对象
【发布时间】：2016-03-14 04:50:36
【问题描述】：

我有一个尚未附加到文档树的img 对象。是否可以为该对象分配 onclick 事件（使用 attachEvent 或 addEventListener）？还是我必须将它附加到 DOM first 并且 只有这样 我才能附加事件？

var image = document.createElement("img");
image.src = "image1.png";

// Will any of the following work?
image.attachEvent("onclick", displayImage); // IE
image.addEventListener("click", displayImage, false); // non-IE

document.getElementById("imageDiv").appendChild(image);

function displayImage() {
   ...
}

请仅包含纯 JavaScript（无 JQuery）。谢谢！

【问题讨论】：

当你尝试它时发生了什么，因为我确信这会回答你的问题。
您的代码似乎完全正确，您测试时是否有问题？

标签： javascript

【解决方案1】：

据我所知，您正在寻找 jquery live()/on() 功能的本机实现。你应该看看Implementing jQuery's "live" binder with native Javascript。

【讨论】：

【解决方案2】：

我发现了什么：

使用前添加评委。
getElementById 的参数需要一个“#”。

var image = document.createElement("img");
image.src = "image1.png";
if(image.attachEvent){
image.attachEvent("onclick", displayImage);} // IE

image.addEventListener("click", displayImage, false); // non-IE

document.getElementById("#imageDiv").appendChild(image);

function displayImage() {
  ...
}

【讨论】：