事件委托/ API访问

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件委托/ API访问相关的知识,希望对你有一定的参考价值。

我正在为个人项目构建新闻聚合器,它涉及从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”。唯一的问题是当我点击业务页面的链接时,事件监听器中的所有内容都有效,除了页面不显示商业新闻。它只显示主页上的内容。

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

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

答案

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

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

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

以上是关于事件委托/ API访问的主要内容,如果未能解决你的问题,请参考以下文章

将事件创建为委托 Outlook API

内存和性能--事件委托移除事件处理程序

委托事件

原生js如何绑定a连接点击事件?

C# 事件详解

《精通C#》委托与事件(11.1-11.2)