检测单击任何子节点并在 JavaScript 中获取其 ID 属性 [重复]答案

【问题标题】：Detect click on any child node and get its ID attribute in JavaScript [duplicate]检测单击任何子节点并在 JavaScript 中获取其 ID 属性 [重复]
【发布时间】：2020-04-16 17:18:02
【问题描述】：

当父节点有很多子节点时，如何获取元素的子节点ID？

<div id="parentID">
    <div id="id_1"></div>
    <div id="id_2"></div>
    <div id="id_3"></div>
    ...
    <div id="id_n"></div>
</div>

在上面的代码示例中，如何获取用户点击任意一个子节点的ID？

【问题讨论】：

标签： javascript html

【解决方案1】：

将eventListener 分配给父元素以及单击子元素时元素检索其 id 属性。这是一个代码示例：

document.getElementById('parentID').addEventListener('click', (e) => {
  console.log(e.target.id)
})

<div id="parentID">
  <div id="id_1">id1</div>
  <div id="id_2">id2</div>
  <div id="id_3">id3</div>

  <div id="id_n">idn</div>
</div>

【讨论】：

最好的答案，谢谢。

【解决方案2】：

当然，events 在 dom propagate 中，并且从孩子转移到父母。

您可以添加单个事件侦听器并检查其目标属性。这种添加单个事件侦听器和基于子级路由的技术称为事件委托。

document.querySelector("#parentID").addEventListener('click', (e) => {
  // e is an event object
  // e.target; is whomever was actually clicked
  if (e.target.id === 'id_1') {
    // do something specific.
  }
});

请注意，通常在您的代码中具有顺序 ID 是一种代码异味，表明关注点分离不当。因此，请确保在做之前知道这是正确的做法。

【讨论】：

【解决方案3】：

你可以试试这个。

function byid( e ){ return document.getElementById( e ); }
var id1 = byid( "id_1" ),
    id2 = byid( "id_2" ),
    id3 = byid( "id_3" ),
    id4 = byid( "id_4" );
[id1,id2,id3,id4].forEach( e => {
    e.addEventListener( "click",getId );
    function getid( e ){
        alert( e.getAttribute( "id" ) );
    }
} );

【讨论】：