使用 addEventListener 引用 JavaScript 中的调用对象

Question

我是 JavaScript/HTML/CSS 的新手，我无法发现我在这个 JavaScript 函数中犯的错误。我们的老师告诉我们使用 addEventListener 方法，因为它有一些显着的优点。

这是我的带有问题函数的整个脚本

 var espandi = function (e) {
    var toHide = document.getElementsByClassName("optional");
    for (var index = 0; index < toHide.length; index++)
        toHide[index].style.display = "none";
    var toShow = e.target.getElementsByClassName("optional");
    for (index = 0; index < toShow.length; index++)
        toShow[index].style.display = "block";
}
var expansibleObjects = document.getElementsByClassName("singleresult");
for (var index = 0; index < expansibleObjects.length; index++)
    expansibleObjects[index].AddEventListener("click",espandi);

事实是行 e.target.getElementsByClassName 让我得到了这种类型的错误

Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName').

相反，如果我直接在元素上使用属性“onclick”设置函数，该函数将完美运行。所以我认为问题在于使用 e.target

引用调用对象

更新 1

首先，我想说这是一个大学项目，我不能发布整个代码，这对我的考试来说是有风险的。然后显然还有更多问题。首先，在文档上应用 getElementsByClassName() 方法后，他似乎可以获得元素集合，但如果我尝试打印单个元素，它会在日志中显示 undefined 。这是代码：

var list = document.getElementsByClassName("prova");
if (list[0]) {
    console.log("Assigning using \"list[0]\" as check");
    list[0].onclick = espandi();
    list[0].addEventListener("click",espandi);
    console.log("finished adding listeners");
}
else if(list.item(0)){
    console.log("Assigning using \"list.item(0)\" as check");
    list.item(0).onclick = espandi();
    list.item(0).addEventListener("click",espandi);
    console.log("finished adding listeners");
}
else console.log("failed assignment");
console.log("printing list");
console.log(list);
console.log("printing list[0]");
console.log(list[0]);
console.log("printing list.item(0)");
console.log(list.item(0));

这是日志输出： log output

显然，我成功使我的脚本工作的唯一方法是以这种方式编辑函数：

function espandi (caller) {
    var toHide = document.getElementsByClassName("optional");
    for (var index = 0; index < toHide.length; index++)
        toHide[index].style.display = "none";
    var toShow = caller.getElementsByClassName("optional");
    for (index = 0; index < toShow.length; index++)
        toShow[index].style.display = "block";
}

然后使用“onclick”HTML 属性直接将其分配给元素，如下所示：

<table class="prova" onclick="espandi(this)">

因此参数“caller”指的是实际触发函数espandi的元素。问题是我真的很想知道两件事：

如何在JS中使用EventHandler函数（方法.addEventListener()）和普通函数（所需元素的属性.onclick）来引用调用者。
如何管理getElementByClassName()方法和自己返回的集合

最后，总结一下，现在我在分配事件侦听器和引用调用者时遇到了问题，而没有在我展示的 HTML 代码中使用 this 之类的参数你.

Answer 1

您正在调用 espandi 而不是将其分配给 onclick 处理程序。

因此您需要删除 () 并执行 expansibleObjects[index].onclick = espandi;

无论如何，在你的问题中我没有看到任何 e.target.addEventListener() 所以当你说 The fact is the line e.target.addEventListener() gets me an error 我不明白你的意思，也许你需要添加更多代码。

使用 addEventListener 引用 JavaScript 中的调用对象

Referring to the calling object in JavaScript using addEventListener

javascript

event-handling