Vanilla JS 相当于 jQuery $.once()？答案

【问题标题】：Vanilla JS equivalent to jQuery $.once()?Vanilla JS 相当于 jQuery $.once()？
【发布时间】：2021-04-26 17:51:58
【问题描述】：

在 Drupal 9 网站上工作并尝试向页面添加一些自定义 JS 代码。

Drupal.behaviors.syfyGlobalHideMenu = {
  attach: function (context, settings) {
    $('.nav-flyout', context).once('remove-modals', function () {
      $(document).keyup(function (e) {
        if (e.keyCode == 27) {
          $('.nav-flyout', context).removeClass('js-flyout-active');
        }
      });
    });
  }
};

想知道是否有与上面的 jQuery .once 功能等效的 vanilla JS？目前 Drupal 多次附加事件侦听器，我试图避免这种情况，因为我只想附加一次事件侦听器，但每次调用事件时让它保持附加并运行。

let intervalID = null;
const search = document.querySelector(".call-us-table input#edit-search");

search.addEventListener("keydown", event => {
  form.setAttribute("onsubmit", "return false");
  clearInterval(intervalID);
});
search.addEventListener("keyup", event => {
  intervalID = setInterval(submitForm, 2000);
});

【问题讨论】：

这是一个类似的问题stackoverflow.com/questions/36312249/…
我看到了，但似乎 .once 和 .one 之间存在差异。我不希望事件监听器只调用一次，我希望它只附加到元素一次，但仍然可以被连续调用。 Drupal 多次附加事件监听器。
您可以在行为对象中设置一个属性来跟踪是否已附加事件侦听器......嗯，也许我需要举个例子。您是否打算继续使用 jquery 作为选择器但不使用 jquery.once？
嗯，为什么要从选择器中添加事件侦听器？这对我来说似乎没有必要，除非“.nav-flyout”不包含在初始页面加载中并且是通过 ajax 加载的。

标签： javascript jquery drupal

【解决方案1】：

jquery 曾经添加一个 html 属性来检查是否是第一次运行。

function vanillaOnce() {
  if (!document.body.getAttribute('data-once')) {
    document.body.setAttribute('data-once', 'true');
    return true;
  } else {
    return false;
  }
}

if (vanillaOnce) {
  console.log('runs only once');
}

【讨论】：

谢谢！那么我将如何实现该代码以适应我添加到上述问题末尾的“keydown”和“keyup”事件侦听器？确保这些事件监听器继续触发，但只连接到 search 元素一次。
此答案中发布的代码并不总是适用于 drupal 行为，因为有时您想对 ajax 返回的内容执行某些操作，这将停止。
JQuery 曾经向被选中的元素添加一个属性（类），而不是整个文档。