为什么我不能在这种情况下组合 document.getElementsByTagName 和 .addEventListener？

Question

我正在做一点power point，但我卡住了。单击一个 <input> 时，我想更改一个变量。我试过了：

HTML :

<input size="40">
<input size="40">

JAVASCRIPT :

inputClicked = false;
document.getElementsByTagName("INPUT").addEventListener("click", function() {
  inputClicked = true;
});

var inputClicked = false;
document.getElementsByTagName("INPUT").addEventListener("click", function() {
       inputClicked = true;
       alert(inputClicked);
});

<input>
<input>

你运行这个隐藏的片段，你会看到，当 <input> 被点击时，没有弹出警报。请告诉我我的错误，或者其他方法....

Answer 1

因为通过标签名称您可以获得一个元素数组，您将需要遍历该数组并在每个元素上添加事件。如果您使用 jquery 则可以一次在多个元素上分配事件。

你可以这样做：

javascript:

var elements = document.getElementsByTagName("input")
for (i = 0;i<elements.length; i++){
  elements[i].addEventListener("click", function() {
    inputClicked = true; 
  });
}

jQuery:

$("input").click(function(){
   inputClicked = true;
});

Answer 2

使用 focus 而不是 click 的好处是您可以使用 Tab 键。

document.querySelector('input').addEventListener('focus', function (event) {
  console.log(event.target)
}, false)

如果您要处理多个输入标签：

const inputs = Array.from(document.querySelectorAll('input'))

inputs.forEach(function (input) {
  input.addEventListener('focus', function (event) {
    console.log(event)
  }, false)
})

说明： document.querySelectorAll('input') returns 不是数组的 NodeList。 Array.from() 将 NodeList 转换为数组。

为什么我不能在这种情况下组合 document.getElementsByTagName 和 .addEventListener？

Why cant't I combine document.getElementsByTagName and .addEventListener in this case?

html

javascript

tags

addeventlistener

getelementsbytagname