我有一个逐步增强的< select>
HTML中的元素.
它使用以下形式,
<ul> <li></li> <li></li> ... </ul>
使用当前实现,click事件处理程序将附加到每个li元素.
如果您拥有大约1000-2000个元素,这会产生问题,与将单个事件处理程序附加到< ul>相比,它会更慢吗？并从e.srcElement中选择必要的信息？
目前的实施：
有完整的清单
<div>
<select>
//1000-2000 elements
<option> </option>
</select>
<ul>
//Mapping the values of the 1000-2000 option tags
<li> </li>
</ul>
</div>
click事件处理程序将选定的li映射到其等效选项,将其设置为所选项并触发select的change事件.
解决方法
首先,无论您如何附加点击处理程序,切换的1000-2000个DOM节点本身都可能是个问题.
委派事件通常是一种很好的做法,但不能太过分.共享相同功能的最近共同祖先通常是最好的.
我怀疑为每个子元素使用一个事件处理程序会对性能或内存产生任何明显的影响,但委托事件只是非常有意义,同样也是为了保持一个干净的可维护代码库.
此外,通过委派活动,您可以自由添加/删除子项,而无需担心附加/分离事件.
例：
var ul = document.getElementsByTagName('ul')[0] // Or similar...
ul.addEventListener('click',function(e) {
if(e.target.nodeName != 'LI') return;
var li = e.target
// map li -> option
});
当然,您需要使用attachEvent和srcElement来支持旧版Internet Explorer.
附注：请记住,可以使用键盘等访问原生选择框,因此您最好不要仅依靠单击处理程序来创建使用UL / LI元素的“逐步增强”选择框.
