JavaScript NodeList关联点击

Question

我愿意在假期学习使用JS操作DOM。我从简单的事情开始，比如：

var sliderControler = document.getElementsByClassName("slider-controler");
var slideAtual = 0;

for(i = 0; i < sliderControler.length;i++) {
  sliderControler[i].click(function(){
    console.log("I love to screw my brain with js");
  })
}

为什么我无法关联这个事件？ 我有一个节点列表，对吧？

document.getElementsByClassName然后返回一个节点列表， 而jQuery $(".slider-controler") 返回一个对象。

那么从jQuery返回的对象和节点列表之间有什么区别呢？

- Mateus Vahl

Answer 1

目前，您正在为NodeList（sliderControler）中的每个HTMLElement触发单击事件。

NodeList的每个元素都是一个HTMLElement。要将单击处理程序绑定到NodeList中的元素，请使用addEventListener或将处理程序分配给onclick属性。

for(i = 0; i < sliderControler.length;i++) {
  sliderControler[i].addEventListener('click', function(){
    console.log("I love js");
  });
}

如果您正在使用jQuery，您不需要使用循环来绑定单击处理程序。

$('.sliderControler').click(function() {
    console.log("I love js");
});

- c.P.u1

Answer 2

您可以使用 addEventListener 处理元素的点击事件。

sliderControler[i].addEventListener('click', function() {
    console.log("I love to mess my brain with js");
});

使用jQuery，您只需执行以下操作即可处理具有类.slider-controler的所有元素的单击事件。

$('.slider-controler').on('click', function () {
    console.log("I love to mess my brain with js");
});

- kavun

Answer 3

从jQuery返回的值不是真正的NodeList，而是一个特殊的jQuery对象。jQuery的click()方法接受一个函数作为事件处理程序，就像你在上面的代码中所写的那样，然而原生的Element对象不支持这种方式。

尝试将sliderController.click(function...更改为sliderController.onclick = function...

- sp0rkyd0rky

Answer 4

jQuery选择器返回的对象是一个包含元素的jQuery封装集合。您可以直接在DOM元素上使用的方法有很大的不同。

作为开始，我建议查看MDN关于Element接口的文档：https://developer.mozilla.org/en-US/docs/Web/API/element

对于事件绑定，通常有两种选择：

1. 使用相应的on*属性：

   sliderController[i].onclick = function() {
     /* ... */
   }
   

   尽管如此，通常不建议这样做，因为它使您无法将多个处理程序绑定到给定的事件。

2. 使用addEventListener：

   sliderController[i].addEventListener("click", function() {
     /* ... */
   });
   

你可能想要查看一些关于addEventListener与on*的MDN笔记。

- Renato Zannon