为什么使用class选择器绑定事件监听器（event listener）无法正常工作

• document.getElementsByClassName 返回的是 HTMLCollection 类数组对象，并非单个DOM元素，你没有对集合内的元素遍历绑定事件，无法生效。
• 代码中仍然使用未定义的input变量绑定事件，之前使用id选择器能生效是因为浏览器会自动将带id属性的DOM元素挂载为window对象的同名属性，不需要显式获取就能直接调用，但切换class选择器后这个逻辑不成立。
• 校验不通过时你直接修改elements.value，而elements是类数组集合，不存在value属性，就算绑定成功也无法正确回写输入值。

<!DOCTYPE html>
<html>
<body>

<input type="text" class="inputs form-control" tabindex="9" maxlength="2">
<!-- 可新增多个同class的input测试批量绑定效果 -->

<script>
var elements = document.getElementsByClassName("inputs");
// 遍历所有匹配class的元素，逐个绑定事件
for(let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('keyup', (event) => {
    let regEx = /^[0-9a-fA-F]+$/;
    let inputVal = event.target.value.toString();
    let isHex = regEx.test(inputVal);
    if(!isHex) {
      // 直接操作当前触发事件的输入框的值
      event.target.value = inputVal.slice(0, -1);
    }
  })
}
</script>

</body>
</html>

内容的提问来源于stack exchange，提问作者magic bean