1

我愿意在这个假期学习用 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 返回的对象和节点列表有什么区别

4

4 回答 4

3

目前，您正在为( )HTMLElement中的每个 s触发一个单击事件。NodeListsliderControler

的每个元素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");
});
于 2013-11-07T04:13:41.650 回答
1

您可以使用以下方法处理元素的单击事件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");
});
于 2013-11-07T04:12:31.563 回答
0

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

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

于 2013-11-07T04:13:50.760 回答
0

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

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

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

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

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

    但通常不鼓励这样做，因为它使您无法将多个处理程序绑定到给定事件。

  2. 使用addEventListener：

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

您可能想查看MDN 上关于 addEventListener 与 on* 的一些注释

于 2013-11-07T04:15:19.200 回答