浏览器原理 · 单选题 · 第 25 题
前端与全栈开发面试 · 第 25 题
列表有上千个 li,要处理每一项的点击,用事件委托的做法是?
- A在捕获阶段给每一个 li 分别绑定监听,并在回调里调用 stopPropagation 阻止冒泡
- B利用事件冒泡,只在父元素上绑定一个监听,通过 event.target 判断点击的是哪一项
- C给每一个 li 都单独绑定一个点击监听函数,这样每一项点击时都能被准确地识别出来
- D在 window 对象上轮询所有 li 的状态,发现哪一项被点击过就去执行对应的处理逻辑
答案
B B. 利用事件冒泡,只在父元素上绑定一个监听,通过 event.target 判断点击的是哪一项
解析
事件委托只需要一个监听器,内存占用少,而且后来动态添加的子元素也能自动生效。回调里常用 event.target.closest('li') 找到真正的列表项,因为点击可能落在 li 内部的子元素上。focus、blur 等不冒泡的事件不能直接委托,可以改用 focusin、focusout。