Question

我试图找出是否可以通过addEventListener事件生成的对象捕获HTML元素（DIV）的ID，其他元素（span，img ...）的父元素。

更具体地说，我要尝试的是无论单击何处，上面的文本都将替换为“ IdDiv”，这是分配给DIV元素的ID，其中将span和img嵌套在其中。 >

我现在得到的是我实际单击的元素的ID。

我希望我的代码可以作为我要说的例子的一个例子

Pd：正在寻找普通的JS解决方案，因为这就是我开始的目的。

const myListOfElements = [
    {
     id: 1,
     name: "Text 1",
     img: "https://placehold.it/300?text=Elemento%201"
    },
    {
     id: 2,
     name: "Text 2",
     img: "https://placehold.it/300?text=Elemento%202"
    },
    {
     id: 3,
     name: "Text 3",
     img: "https://placehold.it/300?text=Elemento%203"
    }
   ];
   
   const createElements = (elementsArray) => {
     const container = document.querySelector('#container');
     
     elementsArray.forEach(({id, name, img}) => {
        const element = document.createElement('div');
        element.setAttribute('id', 'idDiv')
        
        // creating Span and append it to parent
        const elementSpan = document.createElement('span');
        elementSpan.setAttribute('id', 'idSpan')
        elementSpan.innerText = name;
        element.appendChild(elementSpan);
        
        // creating IMG element and append it to parent
        const elementImg = document.createElement('img');
        elementImg.setAttribute('src', img);
        elementImg.setAttribute('alt', name);
        elementImg.setAttribute('id', 'idImg');
        element.appendChild(elementImg);
        
        // adding eventListenet
        element.addEventListener('click', () => {
          const targetElement = document.querySelector('#oneText');
          targetElement.innerText = event.target.id;
          console.log(event.target.id);
        });
        
        // add element to container
        container.appendChild(element);
     }) 
   }
   
   createElements(myListOfElements);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


<span id="oneText">THIS TEXT MUST CHANGE</span>
<div id="container">
</div>



<script type="text/javascript" src="prueba.js"></script>
</body>
</html>

Answer 1

您想要父元素或子元素的ID？

Answer 2

与parentNode一起，它将提供被单击的父元素的ID

<div class="myDiv">
    <ul id="myUl">
        <li id="myLi">List Item</li>
    </ul>
</div>

var li = document.getElementById('myLi');
li.addEventListener('click',function(e){
   console.log(e.target.parentNode.id);
});

使用vainilla JS获取触发事件的父DOM元素的ID

2 个答案: