Javascript 构造添加事件侦听器的正确方法是什么？

我正在做一个小的个人项目，我使用vanilla JS控制前端的一切。我有5条不同的路线和一条

app.js

。以下是我当前添加事件侦听器的方式：

    function deleteTopic() {
    let btn = document.querySelector('.button-delete-topic')
    if (btn) {
      btn.addEventListener('click', e => {
        ////////////do something
      })
    }
  }

---

它工作得很好，但我担心的是，该函数在所有路由上都被调用，即使

按钮delete topic

仅在一个路由上。这样添加事件侦听器是个坏主意吗？为每个路由添加单独的

*.js

文件是否更好？谢谢您的建议。

我将创建一个实用程序来处理这些事件

document.addEventListener('DOMContentLoaded', function (ev) {
    var button = document.getElementsByTagName("button");
    button.addEventListener("click", function () {
      console.log(this.getAttribute('data-action'));
      // Check if data-action exists or do something with action
    });
}, true);

---

然后可以使用

数据属性

传递数据

deleteTopic

是否仅在该路线上调用？如果是这样的话，我觉得很好me@CertainPerformance不，所有路线都有。然后，

if（btn）

如果没有

按钮，则条件的计算结果为false删除主题

听起来您应该更改的是，

deleteTopic

仅在该路由上被调用，而不是allSure。如果函数仅在某个页面的上下文中有意义，请在调用它之前确保您在该页面上。项目越大，这对于代码结构来说就越重要和有用。我认为只要你做得对，任何一种方法都可以很好地工作，至少对于大型专业网站以外的任何地方都是如此，因为大型专业网站可能会有更客观的精益。如果由于共享代码而合并脚本，如果需要的话，您可能可以使用像Webpack这样的绑定器来输出多个.js文件