const listDom = document.getElementById('J_list');
// 事件代理
listDom.addEventListener('click', e => {
  if (e.target.nodeName.toLowerCase() === 'li') {
    const li = e.target;
    console.log(li.getAttribute('data-id'));
  }
});

// 模拟异步获取数据
const getListData = () => {
  return new Promise((resove, reject) => {
    setTimeout(() => {
      resove([
        {
          id: 0,
          name: 'zhangsan',
          age: 18
        },
        {
          id: 1,
          name: 'lisi',
          age: 19
        },
        {
          id: 2,
          name: 'wangwu',
          age: 17
        }
      ]);
    }, 2000);
  });
};

getListData().then(list => {
  // 生成list
  list.forEach(({ id, name, age }) => {
    let li = document.createElement('li');
    li.setAttribute('data-id', id);
    li.innerText = `${name}: ${age}`;
    listDom.appendChild(li);
  });
});