如何合并事件监听器？API应用模态框未正确展示选中项数据问题求助

你的问题核心在于重复给同一个按钮绑定事件监听器：每次调用addListItem创建一个宝可梦列表项时，你都会给#base-stats-button添加一个新的点击事件，但这个按钮是全局唯一的。当你创建了N个列表项后，这个按钮就绑定了N个showStatModal(pokemon)事件，每个事件对应不同的宝可梦数据。所以当你点击这个按钮时，所有N个事件都会依次执行，看起来就像是遍历了所有数据。

修复方案：只绑定一次事件，存储当前选中的宝可梦 #

我们不需要给每个列表项都绑定基础统计按钮的事件，而是应该先记录当前用户点击的是哪只宝可梦，然后给基础统计按钮只绑定一次事件，在事件中使用这个记录的宝可梦数据。

方法一：使用全局变量存储当前选中项

首先在全局作用域定义一个变量来保存当前选中的宝可梦：

let currentSelectedPokemon = null;

然后修改addListItem函数中的事件绑定逻辑：

function addListItem(pokemon) { 
  let pokeUl = document.querySelector('.list-group'); 
  let listItem = document.createElement('li'); 
  let button = document.createElement('button'); 
  let baseStatsButton = document.querySelector('#base-stats-button'); 
  
  button.innerText = pokemon.name; 
  button.classList.add('btn', 'btn-primary'); 
  listItem.classList.add('group-list-item'); 
  button.setAttribute("data-target", "#my-modal"); 
  button.setAttribute("data-toggle", "modal"); 
  
  listItem.appendChild(button); 
  pokeUl.appendChild(listItem); 

  // 点击列表按钮时，记录当前选中的宝可梦
  button.addEventListener('click', function() { 
    currentSelectedPokemon = pokemon;
    showDetails(pokemon); 
  }); 

  // 只给基础统计按钮绑定一次事件，避免重复绑定
  if (!baseStatsButton.dataset.hasEventBound) {
    baseStatsButton.addEventListener('click', function() { 
      // 确保有选中的宝可梦时才执行
      if (currentSelectedPokemon) {
        showStatModal(currentSelectedPokemon); 
      }
    }); 
    // 标记按钮已绑定事件，防止重复绑定
    baseStatsButton.dataset.hasEventBound = 'true';
  }
}

方法二：通过DOM元素的data属性存储选中项

如果你不想用全局变量，可以在展示详情时，把当前宝可梦的数据存储到第一个模态框的DOM元素中：

function showDetails(pokemon) {
  // 将宝可梦数据转为JSON字符串，存储到模态框的data属性中
  document.querySelector('#my-modal .modal-body').dataset.pokemonData = JSON.stringify(pokemon);
  
  // 你的原有展示逻辑...
}

然后在页面加载完成后，给基础统计按钮绑定一次事件：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const baseStatsButton = document.querySelector('#base-stats-button');
  baseStatsButton.addEventListener('click', function() {
    // 从模态框元素中读取存储的宝可梦数据
    const pokemonDataStr = document.querySelector('#my-modal .modal-body').dataset.pokemonData;
    if (pokemonDataStr) {
      const pokemon = JSON.parse(pokemonDataStr);
      showStatModal(pokemon);
    }
  });
});

为什么这个方案有效？ #

两种方法都确保了#base-stats-button只有一个点击事件监听器，点击时只会获取当前用户选中的那只宝可梦的数据，而不是触发所有绑定过的事件。这样就解决了第二个模态框遍历所有数据的问题。

内容的提问来源于stack exchange，提问作者RDX10290