避免页面上重复监听器的最佳实践

<button id="myButton">Click me!</button>
<script>
  const button = document.getElementById("myButton");

  // Script 1
  button.addEventListener("click", () => {
    console.log("Listener 1 triggered!");
  });

  // Script 2
  button.addEventListener("click", () => {
    console.log("Listener 2 triggered!");
  });
</script>

// globalEventListeners.js

const globalListeners = {
  focusListener: null, // 用于存储 focus 事件的监听器函数
  addFocusListener: function(callback) {
    if (!this.focusListener) {
      this.focusListener = (event) => {
        callback(event);
      };
      window.addEventListener("focus", this.focusListener);
    }
  },
  removeFocusListener: function() {
    if (this.focusListener) {
      window.removeEventListener("focus", this.focusListener);
      this.focusListener = null;
    }
  }
};

export default globalListeners;

// otherScript.js
import globalListeners from './globalEventListeners.js';

globalListeners.addFocusListener((event) => {
  console.log("Focus event triggered!");
});

// 在不需要监听时，可以移除监听器
// globalListeners.removeFocusListener();

// module1.js
export function handleButtonClick() {
  console.log("Button clicked from module 1!");
}

// module2.js
export function handleButtonClick() {
  console.log("Button clicked from module 2!");
}

// main.js
import { handleButtonClick as handleButtonClick1 } from './module1.js';
import { handleButtonClick as handleButtonClick2 } from './module2.js';

const button = document.getElementById("myButton");
button.addEventListener("click", handleButtonClick1);
button.addEventListener("click", handleButtonClick2);

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const list = document.getElementById("myList");

  list.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
      console.log("You clicked on:", event.target.textContent);
    }
  });
</script>

window.addEventListener('load', () => {
  console.log('Page loaded!');
}, { once: true });