javascript - 纯 JavaScript 中的单击事件

Question

使用纯 JavaScript 单击 Html 元素时如何知道当前 Html 元素的 id？

<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

我想在单击此 div 的主体时捕获“myId”。这意味着当我单击 First Div 和 Second Div 时，我想获取父 div 的 ID。

我的JS代码如下。

document.onclick = function(e) {
   alert(e.target.id)
}

Answer 1

您可以通过以下方式做到这一点:

var div = document.getElementById('myId');
div.addEventListener('click', function(e){
  console.log(this.getAttribute('id'))
});

<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>