javascript - 指出当前 JS 中使用的 DOM 类？

Question

我遇到了一个问题，我需要指出我在 JS 中使用的类的当前编号。例如，这是我的代码:

<div>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
</div>

现在我知道如果我输入 document.getElementsByClassName("child")，它将为我提供一个数组，其中包含提到的类 p 的所有可用用法。但是我想知道单击的确切按钮。

就像如果单击了第二个按钮 p class 一样，我希望我的函数返回数字 2。同样，如果单击第三个按钮，我希望将数字 3 返回给我。有什么功能吗？我应该如何进行？我对 JS 完全陌生。

Answer 1

您想要做的事情在 JavaScript 中称为事件委托(delegate)。您只需在父元素上添加事件监听器，以避免向多个子元素添加事件处理程序。

e.target 为您提供调用事件处理程序(此处为单击)的元素。您可以使用各种属性获取有关该元素的信息，例如 e.target.textContent 为您提供按钮文本。

const container = document.querySelector(".container")

container.addEventListener('click',(e)=>{
  console.log(e.target)
  console.log(e.target.textContent)
})

<div class="container">
  <p><button type="button">Click here 1</button></p>
  <p><button type="button">Click here 2</button></p>
  <p><button type="button">Click here 3</button></p>
  <p><button type="button">Click here 4</button></p>
</div>