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

Answer 2

<div id="id1" class="name">first</div>
<div id="id2" class="name">second</div>
<div id="id3" class="name">third</div>
<script type="text/javascript">
  var nodes = document.querySelectorAll('.name');
  Array.from(nodes).forEach(function (node) {
    node.addEventListener('click', function (event) {
      alert('you clicked' + event.target.textContent + ' with id: ' + event.target.getAttribute('id'));
      // you might also use event.target.innerHTML here
    });
  });
</script>

Answer 3

我建议您使用两个 DOM api：

1. document.querySelector

   和

   document.querySelectorAll

   和

2. element.addEventListener('click', event => {/* ... */});

这些是我对“vanilla js”dom 操作的注意事项。

请参阅下面的示例了解您想要的内容。

Array.from(document.querySelectorAll('.name')).forEach(element => {
  // for each element that matches the querySelector `.name`
  element.addEventListener('click', clickEvent => {
    // call your function when the element is clicked
    // see the properties of a Dom Element here:
    // https://developer.mozilla.org/en-US/docs/Web/API/Element
    yourFunction(element.id, element.innerHTML);
  });
})

function yourFunction(id, innerHtml) {
  // use the values!
  console.log({id, innerHtml});
}

<div id="id1" class="name">[click me] inner html 1</div>
<div id="id2" class="name">[click me] inner html 2</div>
<div id="id3" class="name">[click me] inner html 3</div>