Question

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

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

它运作良好，但我担心的是，即使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传递数据。

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

1 个答案: