on事件侦听器，将其作为参数传递给li元素

Question

我有一个带有很多p标签的列表。基于这些p标签，我将填充另一个div。我通过在li元素中包含onclick="function(this)"来实现这一点。由于某些更改，我更改了代码，现在使用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'作为参数传递，因为知道单击了哪个列表元素很重要。

Answer 1

您可以尝试类似的方法。在这种情况下，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的getElementById("list")个项目，并且希望获得要设置侦听器的项目列表，而不仅仅是一个。

Answer 2

如果您正在寻找将onclick="function(this)"替换为addEventListener的方法，您可以这样做：

document.getElementById("list").addEventListener("click", fillDiv);

在fillDiv内，this将引用附加了单击处理程序的元素。因此，fillDiv将其作为this而不是其第一个参数来接收。

所以：

function fillDiv() {
    // Use `this` where you used to use the first argument
}

您也可以接受参数，因为该函数将被传递一个包含事件的参数，并且在该对象上有一个currentTarget属性，该属性还具有您挂接事件的元素：

function fillDiv(e) {
    // Use `e.currentTarget` where you used to use the first argument
}

如果您使用箭头功能之类的东西，而this不受调用者控制，这将非常方便。