JS中如何实现为新创建按钮添加事件监听器的独立函数

问题背景 #

我正在学习前端开发课程，尝试实现专门为新创建按钮添加事件监听器的独立函数，目前对课程给出的进阶可选要求存在理解疑问，相关要求原文如下：

可选（进阶）：你可以选择额外编写一个专门为新创建按钮添加事件监听器的函数，无需将相关代码写在addListItem()函数内部。如果选择该实现方式，你需要向这个新函数传递两个参数：第一个是指向按钮的变量（用于为其绑定事件监听器），第二个是Pokémon对象，在事件处理函数中调用showDetails方法时需要用到该对象。最后需要在addListItem()函数内将按钮追加到DOM之后调用这个新函数。

我目前编写的事件绑定函数代码片段如下：

function eventListener(button, pokemon) {
    button.addEventListener("click", function () {
      showDetails(pokemon);
    });
  }

需要确认当前实现是否符合要求，以及该功能的正确实现方式。

结论与正确实现 #

你当前编写的事件绑定核心逻辑是符合要求的，只需要补充调整几个细节即可完全满足进阶要求：

• 函数命名建议优化为更语义化的名称，比如bindPokemonButtonEvent，避免和浏览器原生事件API命名混淆，不调整也不影响功能运行
• 严格遵守调用时机要求：必须在addListItem()函数内完成按钮创建、将按钮（或包含按钮的列表项）追加到DOM树之后，再调用这个独立绑定函数，不要在元素挂载到DOM前执行绑定
• 传参时保证对应关系正确：第一个参数传入当前创建的按钮DOM节点引用，第二个参数传入和该按钮一一对应的Pokémon对象，避免闭包导致所有按钮绑定到同一个Pokémon对象的问题

符合要求的完整调用逻辑参考：

// 独立的按钮事件绑定函数
function bindPokemonButtonEvent(button, pokemon) {
  button.addEventListener("click", function () {
    showDetails(pokemon);
  });
}

function addListItem(pokemon) {
  // 创建DOM节点
  const listItem = document.createElement("li");
  const detailButton = document.createElement("button");
  detailButton.textContent = pokemon.name;

  // 组装节点
  listItem.appendChild(detailButton);
  
  // 先将节点追加到DOM的列表容器中
  const pokemonListContainer = document.querySelector(".pokemon-list");
  pokemonListContainer.appendChild(listItem);

  // DOM追加完成后，调用独立函数绑定事件
  bindPokemonButtonEvent(detailButton, pokemon);
}

以上实现完全满足进阶要求的所有规则：事件绑定逻辑完全抽离在addListItem外部独立维护、接收按钮和Pokémon对象两个指定参数、点击事件触发时正确传入对应Pokémon对象调用showDetails方法、调用时机在按钮追加到DOM之后。

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