Fe-interview: [js] 第223天 举例说明你对事件代理的理解

[haizhilin2013]

第223天 举例说明你对事件代理的理解

我也要出题

[niu315]

事件代理，事件冒泡，原理就是将点击子元素的效果加在父元素上，使其冒泡给子元素，让操作更加方便。

[NicholasBaiYa]

事件代理，事件冒泡，原理就是将点击子元素的效果加在父元素上，使其冒泡给子元素，让操作更加方便。

不应该是从子元素冒泡到父元素吗？

[Cleam]

示例

有一个列表 ul，列表里面的每一项 li 是通过 js 动态生成到 html 中，在列表数据还没有获取到的时候，需要先注册列表项的点击事件，这时候使用事件代理，将列表项 li（children）的点击事件代理给父级列表 ul（parent）

<ul id="J_list"></ul>

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);
  });
});

这里只是举了一个我平常用到的最多的场景，没有经过严格测试，希望对你理解事件代理有帮助。

总结

事件代理就是通过事件冒泡的原理，点击 li 时，会冒泡触发到 ul 的 click 事件，从而通过事件对象 e.target 找到 li。