Value from addEventListeners e.traget

Question

是否可以从EventListener存储一个值作为id ?我需要一个ID从这个列表当我点击项目。

这是我尝试过的:

    <ul class="list">
      <li class="item-list" id="1"></li>
      <li class="item-list" id="2"></li>
      <li class="item-list" id="3"></li>
    </ul>
    
    <script type="text/javascript">
        list.addEventListener("click", function (e) {
            let podlistIndex;
            if (e.target.classList.contains("item-list")) {
                podlistIndex= e.target.getAttribute("id");
            }
    
            console.log(podlistIndex);
        });
    </script>

当项目被单击时，我可以获得value作为id，但是当我单击其他地方时，值就丢失了。如何存储该值?

Answer 1

将变量置于事件处理程序之外

let podlistIndex;
list.addEventListener("click", (e) => {
   if (e.target.classList.contains("item-list")) {
      podlistIndex = e.target.getAttribute("id");
   }
   console.log(podlistIndex);
});

Answer 2

在函数外创建一个数组，并在每次单击时填充它。这样它就不会覆盖任何id。

<script>
const ids = [];
let list = document.querySelector('.list');
list.addEventListener("click", function (e) {
   let podlistIndex;
       if (e.target.classList.contains("item-list")) {
        podlistIndex= e.target.getAttribute("id");
        ids.push(podlistIndex);
      }
   console.log(ids);
   });
</script>