事件委托/ 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只能被调用一次。