JavaScript中的事件处理程序,用于逐步增强的`select`元素

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 节点本身可能就是一个问题。

\n\n

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

\n\n

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

\n\n

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

\n\n

例子：

\n\n

var ul = document.getElementsByTagName(\'ul\')[0] // Or similar...\nul.addEventListener(\'click\', function(e) {\n    if(e.target.nodeName != \'LI\') return;\n    var li = e.target\n    // map li -> option\n});\n

\n\n

当然你\xe2\x80\x99需要使用attachEvent和srcElement来支持旧版 Internet Explorer。

\n\n

边注：请记住，可以使用键盘等访问本机选择框，因此您最好不要仅依赖单击处理程序来使用 UL/LI 元素创建“逐步增强”的选择框。

\n