JavaScript

Question

当我尝试加载我正在处理的 HTML 文档时，我不断收到此错误：ReferenceError: event is not defined。它指向文档 javascript 中的 addEventListener() 行。如果可能的话，我正在尝试避免 jQuery。因此我使用 document.getElementsByClassName().addEventListener() 而不是 $(".className").click().

此外，我还想确认一下这个问题：

addEventListener() 是从 getElementsByClassName() 调用的有效方法，还是...
我是否需要使用 forEach() 方法将 addEventListener() 方法一次附加到每个元素对象？

相关 Javascript（非常不完整，因为它应该制作一些主要的 div appear/disappear，我正在将所有内容添加到页面后最后实现该功能）：

document.getElementsByClassName("NavbarButton").addEventListener(
    "click",
    JumpToSection(event.target.innerHTML)
);

function JumpToSection(Section)
{
    /*
        TO DO:
        Figure out how to toggle visibility of main sections
        The selected section needs to have visibility turned on & all others turned off
        May be doable with a loop and an if-else statement
    */

    // Set the URL to include the viewed section ONLY IF the function's input parameter is NOT BLANK
    // EXTREMELY optimized solution found here:
    // 
    if(!!Section) location.hash = Section;

    // Make sure the page is scrolled to the top
    window.scrollTo(0,0);

    // To be used a bit later on for looping through the sections & toggling visibility
    var AllSections = document.getElementsByClassName("Section");
}

还有 HTML 的那一部分，我试图在其中添加事件侦听器（现在，我只在一个导航栏按钮上进行测试；一旦它起作用，我就可以删除 onclick="" 其他人的属性):

<div id="TopBar" class="grid_32">
    <div id="CharName" class="grid_8 alpha">Calyo Delphi</div>

    <ul id="NavBar" class="grid_24 omega">
        <li id="ImagesButton"  class="NavbarButton grid_6 alpha">IMAGES</li>
        <li id="DetailsButton" class="NavbarButton grid_6"       onclick="JumpToSection(this.innerHTML)">DETAILS</li>
        <li id="FormsButton"   class="NavbarButton grid_6"       onclick="JumpToSection(this.innerHTML)">FORMS</li>
        <li id="StatsButton"   class="NavbarButton grid_6 omega" onclick="JumpToSection(this.innerHTML)">STATS</li>
    </ul>
</div>

我已经在 SO 上搜索了与此类似的其他问题，但似乎我已经像我应该做的那样将事件传递给被调用的函数......？所以我不知道我错过了什么...

Answer 1

在 javascript 中，您必须通过 getElementsByClassName

将事件附加到每个节点 return

像这样

var classes=document.getElementsByClassName("NavbarButton");

for(var i=0;i<classes.length;i++)
    classes[i].addEventListener('click', JumpToSection);

function JumpToSection(event){
  console.log(event.target.innerHTML);
}

JavaScript - ReferenceError: event is not defined on addEventListener()

JavaScript - ReferenceError: event is not defined on addEventListener()

javascript-events