javascript - 渐进增强的 `select` 元素的 JavaScript 事件处理程序

Question

我有一个逐渐增强的 <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相当于option , 将其设置为 selected项并触发 select 的更改事件.

Answer 1

首先，无论您如何附加点击处理程序，1000-2000 个切换的 DOM 节点本身可能就是一个问题。

委托(delegate)事件通常是一种很好的做法，但不要太过分。共享相同功能的最接近的共同祖先通常是最好的。

我怀疑为每个子元素使用一个事件处理程序是否会对性能或内存产生任何显着影响，但委托(delegate)事件非常有意义，而且在保持干净可维护的代码库方面也是如此。

此外，通过委派事件，您可以自由添加/删除子项，而不必担心附加/分离事件。

示例:

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。

旁注:请记住，可以使用键盘等访问 native 选择框，因此您最好不要仅依赖点击处理程序来使用 UL/LI 创建“渐进式增强”选择框元素。