Question

我正在研究一个辅助项目，并决定不使用jQuery，所以我的所有脚本都是香草。

我遇到了一个部分，我有几个按钮来选择T恤的尺码，如下所示：

<div class="row animated" id="step3">
    <div class="step-heading" id="t-shirt-size">
        <h3>Select your T-Shirt Size</h3>
    </div>
    <div class="col-xs-6 col-s-6">
        <div class="main-div ts left" id="xs" >XS</div>
        <div class="main-div ts left" id="m" >M</div>
        <div class="main-div ts left" id="xl" >XL</div>
    </div>
    <div class="col-xs-6 col-s-6">
        <div class="main-div ts right" id="s" >S</div>
        <div class="main-div ts right" id="l" >L</div>
        <div class="main-div ts right" id="xxl" >XXL</div>
    </div>
</div><!--end step tshirt size-->

我正在使用此脚本检查按钮是否被单击并将其分配给key：value数组中的值。

var shirtSizeSizes = document.getElementsByClassName('ts');
for (var i = 0; i < shirtSizeSizes.length; i++) {
    shirtSizeSizes[i].addEventListener('click', function () {
        checkTSValueButtonClicked(this);
    });
}

function checkTSValueButtonClicked(el) {
    //values has a key for shirtSize
    values.shirtSize = el.getAttribute('data-value')
}

使用循环的原因是没有其他方法可以在每个循环上添加点击监听器。它仍然会涉及X按钮/ div的点击监听器。

现在我有多个这样的块用于多种事物（例如裤子尺寸等），你可以告诉循环不仅会重复，而且会对性能产生影响（即使是最小的）。

所以我的问题是：这是唯一一次（在最佳实践和所有这些方面）使用类似

的东西

<div class="main-div ts right" id="xxl" onclick="checkTSValueButtonClicked(this)">XXL</div>

这样

我不需要为不同大小的div进行多次循环
我可以稍微清理一下代码，只留下第二个功能

如果我完全忘记了这样做的简单方法，那完全是因为我已经坐在电脑后面几个小时而且我的大脑有点油腻;所以在代码可读性和性能方面的任何帮助都将受到赞赏。

感谢您的时间：）

编辑：

感谢您的回答。任何人也在研究这个主题，我发现这篇文章很有用：https://softwareengineering.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting

Answer 1

第一个解决方案 - 循环

这将是最好的 - 根本不是表现。

第二个解决方案 - 父级的事件处理程序

您可以在某个父元素上设置事件处理程序，并检查是否单击了正确的元素：

var parent=document.getElementsById('step3');
parent.addEventListener('click', function (e) {
    var x = e.target;

    if (x.classList.contains('ts')) {
        //do something
    }
});

第三个解决方案 - 内联事件处理程序

 <div class="main-div ts right"id="xxl" onclick="checkTSValueButtonClicked(this)">XXL</div>

除了不良做法之外，您的checkTSValue...函数必须位于全局范围内才能访问，因此如果它包含在window.onload中，则无效。

与内联onClick可用性划分

1 个答案: