单击eventListener runs once

基础概念

addEventListener 是 JavaScript 中用于在指定元素上添加事件监听器的方法。它允许你为特定事件（如点击、鼠标移动、键盘输入等）指定一个或多个处理函数。当这些事件发生时，相应的处理函数将被调用。

优势

1. 灵活性：你可以为同一个事件添加多个监听器，每个监听器执行不同的操作。
2. 可维护性：通过将事件处理逻辑分离到独立的函数中，代码更易于维护和理解。
3. 非侵入性：不会修改或覆盖元素原有的事件处理逻辑。

类型

addEventListener 支持多种类型的事件，包括但不限于：

• 鼠标事件：click, mousedown, mouseup, mousemove 等。
• 键盘事件：keydown, keyup, keypress 等。
• 表单事件：submit, change, focus, blur 等。
• 窗口事件：load, unload, resize, scroll 等。

应用场景

• 用户交互：监听按钮点击、表单提交等事件，执行相应的操作。
• 动态内容更新：监听数据变化，更新页面内容。
• 性能优化：通过事件委托，减少事件处理器的数量，提高性能。

问题与解决

问题：为什么 addEventListener 只运行一次？

通常情况下，addEventListener 添加的事件监听器会一直有效，直到被显式移除（使用 removeEventListener 方法）。如果 addEventListener 只运行一次，可能是以下原因：

1. 事件处理函数内部逻辑：检查事件处理函数内部是否有条件语句或返回语句，可能导致函数在第一次执行后不再执行。
2. 事件冒泡/捕获：如果事件在冒泡或捕获阶段被其他元素处理并阻止了进一步传播，可能会导致监听器不被触发。
3. 代码逻辑错误：可能在某个地方错误地移除了事件监听器。

解决方法：

1. 检查事件处理函数：确保函数内部没有提前返回或终止条件。
2. 调试事件流：使用 console.log 或浏览器开发者工具跟踪事件流，确保事件没有被意外阻止。
3. 检查代码逻辑：确保没有在其他地方调用 removeEventListener 移除了监听器。

示例代码

以下是一个简单的示例，演示如何使用 addEventListener 监听点击事件，并确保它多次运行：

// 获取按钮元素
const button = document.getElementById('myButton');

// 定义事件处理函数
function handleClick() {
  console.log('按钮被点击了！');
}

// 添加事件监听器
button.addEventListener('click', handleClick);

// 确保不会意外移除监听器
// 如果需要移除监听器，使用以下代码：
// button.removeEventListener('click', handleClick);

在这个示例中，每次点击按钮时，控制台都会输出“按钮被点击了！”。确保你的代码逻辑与此类似，并检查是否有其他因素干扰了事件的触发。