如何实现select选值筛选JS动态生成的ul列表li元素

常规的事件绑定写法，只会给代码执行当下已经存在于DOM树中的节点挂载事件监听器，后续通过JavaScript动态创建、插入页面的<li>元素没有被绑定对应监听，自然无法触发预期逻辑。

方案1：事件委托（优先推荐） #

将事件绑定到页面初始加载时就已存在的静态父节点（即id为lista-projetos-global的<ul>元素），借助浏览器事件冒泡机制，判断触发事件的子元素是否为目标<li>，匹配成功后再执行业务逻辑。
参考实现代码：

// 获取静态存在的父级ul节点
const listContainer = document.getElementById('lista-projetos-global');
// 以点击事件为例，其他事件绑定逻辑完全一致
listContainer.addEventListener('click', function(e) {
  // 向上匹配最近的li元素，兼容li内部嵌套子元素触发事件的场景
  const targetLi = e.target.closest('li');
  if (targetLi && listContainer.contains(targetLi)) {
    // 此处写入原本要给li绑定的业务逻辑，可直接通过targetLi操作当前触发事件的节点
  }
})

该方案无需在每次创建元素时重复绑定事件，后续不管新增、删除多少个li节点，逻辑都能正常生效，内存占用更低，适配动态列表场景。

方案2：元素创建时同步绑定事件 #

调整forum.js中addAUser函数的执行逻辑：每次创建完新的<li>元素、插入DOM之前，先给这个新生成的li节点绑定好对应事件，再执行节点追加操作。
参考实现逻辑：

function addAUser(userInfo) {
  // 保留原有创建li、填充内容、设置属性的逻辑
  const newLi = document.createElement('li');
  // ... 原有给newLi设置文本、子节点、自定义属性的代码
  
  // 新增：给当前新创建的li绑定事件
  newLi.addEventListener('click', function() {
    // 写入对应业务逻辑
  })

  // 保留原有追加节点到ul的逻辑
  document.getElementById('lista-projetos-global').appendChild(newLi);
}

该写法逻辑直观容易理解，但每新增一个li就要注册一个独立的事件监听器，列表节点量级较大时性能弱于事件委托方案。

• forum.js中的addAUser函数定义了li元素的渲染结构，生成的li会被追加到forum.html内id为lista-projetos-global的ul节点中
• REST API请求相关逻辑均编写在api.js文件中

内容的提问来源于stack exchange，提问作者Inês Silva