将 onclick 事件设置为一类元素：如何获取单击的元素的 id？仅限 JavaScript

Question

问题：

我有 134 个元素，必须附加 onclick 事件。我现在正在做这件事，在 eeeeee 每一个上（它们也附加了一个 ondbclick 事件！）：

<div id="id1" class="name" onclick="functionName(this.id)"></div>
<div id="id2" class="name" onclick="functionName(this.id)"></div>
<div id="id3" class="name" onclick="functionName(this.id)"></div>

但是阅读 Eloquent Javascript（第 14 章），这被认为是不好的做法，因为它混合了 html 和 javascript。

所以我想我可以找到一种方法将 onclick 事件附加到所有这些事件上。我搜索了几个小时并尝试了一些事情，如下所示：（摘自 stackoverflow 上的“How do you set a JavaScript onclick event to a class with css”）

window.onload = function() {
    var elements = document.getElementsByClassName('nameOfTheClass');
    for(var i = 0; i < elements.length; i++) {
        var OneElement = elements[i];
        OneElement.onclick = function() {
           //do something
        }
    }
}

点击它可以对元素进行操作，但不能对我的功能进行操作。

我原来的函数接收两个值，即被单击元素的 id 和 insideHTML，现在我找不到访问该信息的方法。

我尝试了 OneElement.id 和 OneElement.innerHTML 只是为了发现它获取了文档中最后一个元素的 id 和innerHTML。

有什么线索吗？非常感谢任何帮助！:)

Answer 1

当 JavaScript 中触发事件时，它会将事件对象传递给回调函数。将其传递到签名中，您将可以访问元素的属性。

window.onload = function() {
    const elements = document.getElementsByClassName('nameOfTheClass');
    
    for (const element of elements) {
        element.addEventListener("click", e => {
            console.log("element was clicked", e.target.id, e.target.innerHTML);
        })
    }
}