Question

我有一个网页，主要由移动用户（约占我的用户的80％）使用，包含大约350个<input type="checkbox">个元素。选中或取消选中复选框时，我想调用一些javascript来将状态保存在本地存储中。当我创建我的页面时，只有大约100个元素，所以不是让每个元素<input type="checkbox" onclick="save();">看起来容易出现拼写错误，或者只是忘记添加onclick，我将其添加到onload功能：

var input_elements = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < input_elements.length; i++) {
    input_elements[i].addEventListener("click", function() { save(this); });
}

虽然效果很好，但会对页面加载时间造成一个小小的惩罚 - 随着我添加元素会越来越差，而且我希望每年再增加100-150。

有没有一种“更好”的方式来做到这一点，无论是在减少加载时间方面（特别是对于浏览速度较慢的移动用户），还是阻止我为我的用户制造愚蠢的错别字，但我很难发现？

Answer 1

您可以在某个公共父级上添加事件处理程序，例如，如果没有包装父级，则为某个包装器div或document。搜索event delegation mechanism以获取有关此模式的更多信息。

Answer 2

您可以添加捕获点击处理程序并测试点击是否在复选框上：

function checkCheck(event) {
    if( event.target && event.target.type == "checkbox"){
      checkSave( event.target)
    }
}
function checkSave( checkBox) {
    // do something for click on checkbox element
    console.log("checkbox %s, checked: %s", checkBox.id, checkBox.checked);
}
window.addEventListener("click", checkCheck, true);

HTML

<input type="checkbox" id="test">

将onclick（）添加到数百个复选框的最轻量级方法是什么？

2 个答案: