javascript节点列表关联点击答案

【问题标题】：javascript nodelist associate clickjavascript节点列表关联点击
【发布时间】：2013-11-07 04:06:54
【问题描述】：

这个假期我愿意学习用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有什么区别

【问题讨论】：

标签： javascript dom native-code nodelist

【解决方案1】：

目前，您正在为NodeList(sliderControler) 中的每个HTMLElements 触发一个点击事件。

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

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案3】：

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

尝试更改 sliderController.click(function... 到sliderController.onclick = function...

【讨论】：

【解决方案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*

【讨论】：