在动态生成的元素上使用普通JavaScript添加事件侦听器并在单击时获取值

我正在尝试控制台。使用JavaScript记录

点击事件的数据编号属性的值。在客户端执行代码期间动态创建多个跨度，每个跨度都有一个类“dynamic span”

样本：

<span class="dynamic-span" data-number="1">This is a dynamic span</span>

我希望使用纯JavaScript实现相同的结果

我使用“动态跨度”类来确定跨度

因此，我能够使用类名获得跨度。但是我得到的是HTMLCollection而不是数组，并且for循环不起作用

代码：

var
elems=document.getElementsByClassName（“动态跨度”），
我
对于（i=0；i

我还检查了以下问题 但是没有成功

以下参考 建议元素。getElementsByCassName（）方法返回一个活动的HTMLCollection

---

请建议一种完成上述任务的方法。

希望这能帮助您：

document.body.onclick = function (e) {
    //get event object (window.event for IE compatibility)
    e = window.event || e;
    //get target dom object reference
    var targetDomObject = e.target || e.srcElement;

    //extra checks to make sure object exists and contains the class of interest
    if ((targetDomObject) && (targetDomObject.classList) && (targetDomObject.classList.contains("dynamic-span"))) {
        var number = targetDomObject.getAttribute("data-number");
        console.log(number);
    }
}

这利用了冒泡。每当触发事件时，它将在所有对象父对象中向上移动，直到它被标记为已处理或不再有父对象。因此，通过附加到主体的单击事件，它将捕获页面上所有未处理的单击事件。方法的顶部获取对事件信息的引用，然后从事件中提取初始目标对象。然后，您所需要做的就是查看对象是否是您要处理的对象，并处理它

---

下面是一段代码：

是的，它成功了！。不过有一个问题，如果我想循环使用前面得到的HTMLCollection，该怎么办。因为for循环不起作用，有没有合适的方法来实现它？@yusufshakel-你说过元素是动态创建的。如果在集合上循环，则只循环当时存在的元素。@Quentin如何循环动态创建的元素。我可以使用jquery来完成它。对于动态跨度，使用纯javascript的正确方法是什么。上面大卫指出的那一个是有效的。但是还有其他选择吗？@yusufshakeel-您在问题中输入的jQuery代码使用事件委托…就像这个答案一样。

var elems = document.getElementsByClassName("dynamic-span");

var
    elems = document.getElementsByClassName("dynamic-span"),
    i;

for (i = 0; i < elems.length; i++) {
    elems[i].addEventListener("click", function (e) {
        console.log(this.getAttribute("data-number"));
    });
}

document.body.onclick = function (e) {
    //get event object (window.event for IE compatibility)
    e = window.event || e;
    //get target dom object reference
    var targetDomObject = e.target || e.srcElement;

    //extra checks to make sure object exists and contains the class of interest
    if ((targetDomObject) && (targetDomObject.classList) && (targetDomObject.classList.contains("dynamic-span"))) {
        var number = targetDomObject.getAttribute("data-number");
        console.log(number);
    }
}