如何使用纯Javascript为动态创建的div添加onclick函数

Question

我目前使用下面的代码在一个函数中基于XML文件动态创建div。

var ftdImg = "<div class='single-img' id='" + pid + "'><a href='#'><img src='" + projHomeThumbURL + "'/></a><p>" + titleEdit(projName) + "</p><p>" + titleEdit(projCat) + "</p><p>" + projDate + "</p></div>";
var divTag = document.createElement("div");

function createNew(standIn) {
    divTag.innerHTML = standIn;
    document.getElementById("container").appendChild(divTag);
}

目前，此代码有效。我想添加一个on click函数来替换“standin”的innerHtml，在我的例子中是var ftdImg，用projImgTag：

var projImgTag = "<div class ='project-image "+projName+"' id='"+pid+"'><a href='"+projFull+"'><img src='"+projThumb+"/></a></div>";

Answer 1

用于处理点击次数的 vanilla js DOM事件是onclick()：

MDN's docs for .onclick()

var divTag = document.createElement("div");
divTag.onclick = function() {
    /* ... */
};

修改

正如 torazaburo 所指出的那样，文档补充说：

  

您可能倾向于使用EventTarget.addEventListener（）方法，因为它更灵活，是DOM Events规范的一部分。

示例：

var divTag = document.createElement("div");
divTag.addEventListener("click", function() {
    /* ... */
}, false);