如何将事件附加到应该在 JavaScript 中只执行一次的元素？

在开发 JavaScript 应用程序时，有时需要将事件附加到元素，但这些事件只需要在元素第一次加载时执行一次。这种情况下，我们可以使用以下方法将事件绑定到元素：

1. 使用 addEventListener

在使用 addEventListener 方法时，我们可以添加一个 options 对象参数。其中的 once 属性可以设置为 true，以便在事件只被触发一次后自动删除事件侦听器。示例代码如下：

element.addEventListener('click', onClick, { once: true });

2. 使用事件委托

在使用事件委托时，我们可以将事件处理程序附加到包含元素的父元素上，然后再根据需要查找匹配的目标元素。在查找完匹配的目标元素后，我们可以将事件处理程序从父元素上删除。示例代码如下：

function onClick(event) {
  if (event.target.matches('.button')) {
    console.log('Button clicked!');
    event.currentTarget.removeEventListener('click', onClick);
  }
}

document.addEventListener('click', onClick);

3. 只执行一次的函数

如果事件只需要在文档中一次性执行，我们可以使用一个只执行一次的函数（Immediately-Invoked Function Expression，IIFE）来实现。当函数被调用时，它会执行一次并在文档中删除自身。示例代码如下：

(function() {
  console.log('Document loaded!');
  // do something
})();

总结

以上三种方法都可以在 JavaScript 中将事件附加到元素上，并确保它们只被执行一次。在开发应用程序时，根据具体情况选择适合自己的方法即可。