带内联 onClick 可用性的 Div

Question

我当时在做一个副业，决定不使用 jQuery，所以我所有的脚本都是原版的。

我遇到了一个部分，其中我有几个按钮 select 如下所示的 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 buttons/divs.

的点击侦听器

现在我有几个这样的块用于多种事物（例如裤子尺寸等），正如您所知道的那样，循环不仅会重复而且还会对性能产生影响（即使是最小的）。

所以我的问题是：这是唯一一次（就最佳实践和所有其他方面而言）使用

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

所以

我不需要为不同大小的 div 循环多次
我可以稍微清理一下代码，只留下第二个函数使用

如果我完全忘记了一个简单的方法来做到这一点，那完全是因为我坐在电脑后面几个小时，我的大脑有点炸了；因此在代码可读性和性能方面的任何帮助将不胜感激。

感谢您的宝贵时间:)

编辑：

感谢您的回答。任何人也在研究这个主题，我发现这个 post 很有用：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 可用性的 Div

Divs w/ Inline onClick Usability

html

javascript

performance

inline

onclick