JavaScript中的事件處理程序，用於逐步增強的`select`元素

Question

我在HTML中有一個逐步增強的<select>元素。

它使用以下形式，

<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的change事件。

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個處理程序，而不是更多。 說明

工作實例

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的選擇框的替代品。 它支持搜索，遠程數據集和無限滾動結果。