Javascript Нодлиста адъюнкт нажмите

Question

Я готов научиться манипулировать DOM с JS этого праздник я начинаю с простыми вещами, как:

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 нодлист

Answer 1

в настоящем время, вы запуская событие щелчка для EAC ч 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

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

Answer 3

Значение, возвращенное из JQuery не является истинным NodeList, но вместо того, чтобы это специальный объект JQuery. Метод jQuery click() принимает функцию как обработчик события, как у вас в вашем коде выше, так как у этого объекта native Element нет.

попробовать Изменение sliderController.click (функция ... Для sliderController.onclick функции = ...

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() { 
       /* ... */ 
   }); 
   

Вы можете проверить некоторые notes on MDN about addEventListener vs on*