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然后，返回一个nodeList，和jQuery $（“。slider-controler”）返回一个对象。

从jQuery返回的对象与nodelist之间的区别是什么

Answer 1

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

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");
});

Answer 2

您可以使用addEventListener

处理元素的点击事件

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

使用jQuery，您可以执行以下操作来处理类.slider-controler的所有元素的click事件

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

Answer 3

从jQuery返回的值不是真正的NodeList，而是一个特殊的jQuery对象。 jQuery click（）方法接受一个函数作为事件处理程序，就像你在上面的代码中一样，本机Element对象没有。

尝试更改sliderController.click（功能... to sliderController.onclick = function ...

Answer 4

jQuery选择器返回的对象是一个jQuery包装的元素集合。您在DOM元素上直接可用的方法是完全不同的。

首先，我建议Element界面上的MDN文档：https://developer.mozilla.org/en-US/docs/Web/API/element

对于绑定事件，您通常有两个选项：

使用相应的on*属性：
```
sliderController[i].onclick = function() {
  /* ... */
}
```
但通常不鼓励这样做，因为它使您无法将多个处理程序绑定到给定事件。

使用addEventListener：

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

您可能需要查看一些notes on MDN about addEventListener vs on*

javascript nodelist关联点击

4 个答案: