事件委托与封闭/ For循环？提供代码比较？哪一种更好？

我想知道是否最好使用闭包和for循环或带有hacky .split（）数组访问的事件委托。代码如下：事件委托与封闭/ For循环？提供代码比较？哪一种更好？

<div id="1"> 
<button id="btn-0">Button 1!</button> 
<button id="btn-1">Button 2!</button> 
<button id="btn-2">Button 3!</button> 
</div> 

<!-- <script type="text/javascript"> 
    var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; 
    for (var btnNum = 0; btnNum < prizes.length; btnNum++) { 
     // for each of our buttons, when the user clicks it... 
     document.getElementById('btn-' + btnNum).onclick = function(frozenBtnNum){ 
      return function() { 
       // tell her what she's won! 
       alert(prizes[frozenBtnNum]); 
      }; 
     }(btnNum); 
    } 
</script> --> 

<script type="text/javascript"> 
    var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; 
    document.getElementById("1").addEventListener("click", function(e) { 
     if(e.target && e.target.nodeName == "BUTTON") { 
      // List item found! Output the ID! 
      alert(prizes[e.target.id.split("-")[1]]); 
     } 
    }); 
</script>

来源

2016-06-01 Intrepid Diamond

一般来说，如果jQuery不可用，我更喜欢循环。 –

既不，我宁愿使用data- *属性来存储信息，并使用[dataset]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset）来获取信息。 –

给按钮一个* value *（或* data- *）属性并使用它来代替ID。无论您是在每个按钮上放置监听器，还是将代理委派给父代，都是设计中的首选问题。你有什么“更好”的标准？ – RobG

不是专家，但没有人回答。我相信前面的方法（使用闭包）会对性能产生更大的影响，因为您将事件侦听器添加到更多元素中（请参阅此jsperf测试，该性能随元素数量的增加而显示性能）。

后一种方法（事件委托）只有一个侦听器，所以它不会遭受相同的perf命中。从评论看来，其他人建议使用data-*属性（虽然他们没有说明为什么？），这与此方法也很相似。也就是说，你将要在DOM中存储数据，并且基于我的（有限）体验，这通常不是很好的设计，因为那时你的逻辑就会依赖于你的UI。

来源

2017-02-26 02:10:30

事件委托与封闭/ For循环？提供代码比较？哪一种更好？

回答

相关问题