Question

我想知道是否更好地使用闭包和for循环或带有hacky .split（）数组访问的事件委托。代码如下：

<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>

Answer 1

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

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

事件委派与关闭/ For循环？提供代码比较？哪个是更好的风格？

1 个答案: