时间戳

首页 > 解决方案 > li 元素的 onclick 事件侦听器，将其作为参数传递

javascript - li 元素的 onclick 事件侦听器，将其作为参数传递

问题描述

我有一个列表，里面有很多 p 标签。基于这些 p 标签，我将填充另一个 div。我通过onclick="function(this)"在我的 li 元素中传递了这个。由于一些更改，我更改了我的代码，现在我正在使用 javascript 构建我的列表。但我不知道如何将 onclick 函数传递给我的列表。

我尝试使用

document.getElementById("list").addEventListener("click", function fillDiv(this);
document.getElementById("list").onclick = fillDiv(this);

在javascript中我试过了

li.onclick = "fillDiv(this)";

我的 p 标签像这样添加到此列表中

p.innerHTML = obj.Name[i];
        li.appendChild(p);

不能完全弄清楚如何将“this”作为参数传递，因为知道单击了哪个列表元素很重要。

标签： javascripthtmllistonclickaddeventlistener

解决方案

你可以尝试这样的事情。在这种情况下，i是您的this.

let items = document.querySelectorAll('li');

items.forEach(i => i.addEventListener("click", () => console.log(i) ));
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

您的方法并非完全错误，但是您只是找不到li带有 a 的项目，getElementById("list")并且您期望获得要设置侦听器的项目列表，而不仅仅是一个。

推荐阅读