为什么不能'在这种情况下，我将document.getElementsByTagName和.addEventLi

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

本文关键字：document 我将 getElementsByTagName addEventLi 这种情况下 不能 为什么      更新时间：2023-09-26

我正在制作一个电源点，但我被卡住了。当单击一个<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>时，不会弹出警报。plz显示我的错误，或者其他方法…

使用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')返回的NodeList不是数组。Array.from（）将NodeList转换为数组。

因为通过标记名称可以获得一个元素数组，所以需要遍历该数组并在每个元素上添加事件。如果使用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;
});
相关文章：