事件委托/ API访问

Question

我正在为个人项目构建新闻聚合器，它涉及从api获取信息。 api有不同的类别可供选择。商业，体育，科技等。我每个类别都有一个单独的页面。我已经建立了主页，其中包含不涉及从特定类别中提取信息的热门新闻故事，并且工作正常。我在尝试点击指向其他页面的链接时遇到了麻烦。例如，当我点击链接转到商家页面时，我想将api标题中的“类别”更改为商家，然后显示商家类别中的热门新闻。

相关的HTML

<ul class="nav-list" id="nav-list">
            <li class="home"><a href="index.html">Home</a></li>
            <li class="business"><a href="business.html" class="business">Business</a></li>
            <li class="entertainment"><a href="entertainment.html">Entertainment</a></li>
            <li class="health"><a href="health.html">Health</a></li>
            <li class="science"><a href="science.html">Science</a></li>
            <li class="sports"><a href="sports.html">Sports</a></li>
            <li class="technology"><a href="technology">Technology</a></li>
          </ul>

我现在只测试“家庭”和“商业”课程，所以这些都是重点。

相关的JavaScript

let newCategory = '';
const navList = document.getElementById('nav-list');

API访问权限

var xhr = new XMLHttpRequest();
xhr.open('GET', url + 'category=' + newCategory, true);
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  console.log(data);
  for (var i = 0; i < 7; i++) {
    cardTitle[i].innerHTML = data.articles[i].title;
    cardSubTitle[i].innerHTML = data.articles[i].description;
    source[i].innerHTML = data.articles[i].source.name;
    if (data.articles[i].urlToImage != null) {
      image[i].src = data.articles[i].urlToImage;
    }else {
      image[i].src = 'no-image.jpg';
    }
  }
};

xhr.send();

事件监听器

navList.addEventListener('click', function (e) {
  console.log(e.target.nodeName);
  if (e.target.className == 'business') {
    console.log('hello');
    newCategory = 'business';
    console.log(newCategory);
  }
}, false);

我已经设置了newCategory变量来尝试通过xhr.open()传递它。当我声明newCategory并立即将其设置为“business”时，该变量有效。 API提供了来自业务类别的新闻。不幸的是，它给了我每页的商业新闻。

此外，当我测试我的事件监听器时，它似乎正常工作。当我console.log(e.target.nodeName);它返回“A”。 console.log('hello');返回“hello”，console.log(newCategory);返回“business”。唯一的问题是当我点击业务页面的链接时，事件监听器中的所有内容都有效，除了页面不显示商业新闻。它只显示主页上的内容。

**注意**我登录到控制台的所有内容仅在我点击时显示一瞬间然后消失，所以我不确定商业新闻是否也只是暂时显示。

任何见解都会很棒。提前致谢。

Answer 1

在没有看到更多代码的情况下，看起来您的代码正在从页面导航到href中的链接。您已定义用于侦听click事件的navList正在从已冒泡的链接接收click事件。当它冒泡时，链接的默认行为即离开页面已经发生。您可以添加以下代码以防止navList中所有链接的默认行为：

document.querySelectorAll('#nav-list li a').forEach((val)=>{
  val.addEventListener('click', (e)=> e.preventDefault());
});

此外，如果xhr请求未包含在函数中，则xhr只能被调用。