Question

我正在尝试 console.log 使用JavaScript在点击事件中<span>的数据编号属性的值。在客户端执行代码期间动态创建多个跨度，每个跨域都有一个“动态范围”类。

样品：

<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/

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

1 个答案: