Question

我正在尝试通过单击复选框（变量为'box'）创建事件监听器。

为什么box.addEventListener会给出错误消息“不是函数”，而当我调用将“ box”作为参数的函数时却起作用？

  <div class="inbox">
    <div class="item">
      <input type="checkbox">
      <p>Item one</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Item two</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Item three</p>
    </div>

<script>

有效的代码：

    const box = document.querySelectorAll('input');

    function clickMe(param) {
        this.addEventListener('click', function () {
            return console.log('hi');
        });
    };

    clickMe(box);

无效的代码：

const box = document.querySelectorAll('input');

    box.addEventListener('click', function(){
        return console.log('hi');
    })

</script>

Answer 1

querySelectorAll()返回匹配元素的列表。您需要遍历它们，并在每个听众上附加一个听众

Answer 2

如果您想使用input向所有document.querySelectorAll添加事件监听器，则需要使用forEach遍历所有元素，因为它会返回所有列表的列表。匹配的元素。您还可以使用for循环或Array.prototype.forEach.call，因为forEach不受广泛支持。

//for each
document.querySelectorAll('input').forEach(i=>{
 i.addEventListener("click", e=>{
  return console.log("hi");
 });
});
//for loop
var inputs = document.querySelectorAll('input');
for(let i = 0; i < inputs.length; i++){
 i.addEventListener("click", e=>{
  return console.log("hi");
 });
}
//Array.prototype.forEach.call
Array.prototype.forEach.call(document.querySelectorAll('input'), function(i){
  i.addEventListener("click", e=>{
  return console.log("hi");
});
});

<div class="inbox">
    <div class="item">
      <input type="checkbox">
      <p>Item one</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Item two</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Item three</p>
    </div>
    <script>
    document.querySelectorAll('input').forEach(i=>{
     i.addEventListener("click", e=>{
      return console.log("hi");
     });
    });
    </script>

Answer 3

querySelectorAll列出了所有提到的元素。在这种情况下，您在querySelectorAll(input)中提到了“输入”。

console.log(document.querySelectorAll('input'))也是如此。所以你就是这样。

const box = document.querySelectorAll('input');
console.log(box);
// 'index' value based on which element you need to add event listener. you have three input fields so index will be 0, 1, 2
box[index].addEventListener('click', function () {
            return console.log('hi');
        });

addEventListener（）对作为参数传递的变量起作用，但对直接变量不起作用吗？

3 个答案: