javascript - 将 onclick 事件设置为元素类 : how to get id of the one clicked? 仅 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 中触发事件时，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);
        })
    }
}