Question

我在HTML中逐步增强了<select>元素。

它使用以下形式，

<ul>
  <li></li>
  <li></li>
  ...
</ul>

使用当前实现，click事件处理程序将附加到每个li元素。

当您拥有大约1000-2000个元素时会产生问题，与将{1}}附加单个事件处理程序并从<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的更改事件

Answer 1

首先，无论您如何附加点击处理程序，切换的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的“逐步增强”选择框元件。

Answer 2

将事件处理程序附加到它会慢得多，而只需将它附加到<ul>并使用jQuery单击子元素，就像这样

<ul>
    //2000 li's
</ul>

$('#ulParent').on('click', function(event) {
    var clicked=event.target;
});

如果你真的需要在每个元素上做，你可以用for循环来做，但我不推荐它

var lis = document.getElementById("ulParent").getElementsByTagName("UL");
for(var i=0;i<lis.length;i++){
    $(lis[i]).bind("click"),function(event){
         //do something here
    }
}

Answer 3

在父元素上使用.on()。您只需要1个处理程序，而不是更多。 Explanation

Working example

function bindCustomSelect() {
  $("#ul").on("click", "li", function(){

    updateSelect( $(this).index() );
  });
}

function updateSelect( idx ) {
  var sel = $("#select");
  sel.selectedIndex = idx;
  sel[0].children[idx].selected = "selected";
  sel.change();
}

Answer 4

要创建选择以处理数千个项目，请查看select2。

它是基于jQuery的选择框的替代品。它支持搜索，远程数据集和无限滚动结果。

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

4 个答案: