在动态生成的元素上使用纯 JavaScript 添加事件侦听器并在单击时获取值 [重复]

Question

我正在尝试 console.log 使用 JavaScript 在点击事件中 <span> 的 data-number 属性的值。在客户端执行代码的过程中会动态创建多个跨度，每个跨度都有一个“动态跨度”类。

示例：

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

所以当点击上述范围时，数字“1”将被控制台记录。

我可以使用 jQuery 记录号码。

$("body").on("click", ".dynamic-span", function (e) {
    e.preventDefault();
    var number = $(this).data("number");
    console.log(number);
});

我想使用纯 JavaScript 实现相同的结果。

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

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

所以，我可以使用 ClassName 获取跨度。但我得到的是 HTMLCollection 而不是数组，for 循环不起作用。

代码：

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"));
    });
}

我还检查了以下 StackOverflow 问题 JavaScript click event listener on class 但没有成功。

以下参考 https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName 建议 Element.getElementsByClassName() 方法返回一个实时的 HTMLCollection。

请提出完成上述任务的方法。

Answer 1

希望这对你有用：

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);
    }
}

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

这是代码的 jsfiddle：https://jsfiddle.net/t4jqtLas/