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

Question

我正在做一个小型个人项目，我使用 vanilla JS 来控制前端的所有内容。 我有 5 条不同的路线和一条app.js 。 这就是我当前添加事件侦听器的方式：

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

它运作良好，但我担心这个 function 在所有路线上都被调用，即使button-delete-topic仅在一条路线上。 以这种方式添加事件侦听器是一个坏主意吗？ 为每条路线添加单独的*.js文件会更好吗？ 谢谢你的任何建议。

Answer 1

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

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);

然后，您可以使用data-attributes来传递数据。