Проблемы делегирования событий - PullRequest
Новая
       26

Проблемы делегирования событий

0 голосов
/ 14 мая 2018

Я изучаю JavaScript и испытываю проблемы с делегированием событий.Я проверял то, что я выполнил в браузере, на наличие ошибок - не очень много - и продолжаю получать сообщение о том, что

thumbs.addEventListener не является функцией

Любая помощь будет оценена.

Вот мой код: 

window.addEventListener("load", function() {
    var thumbs = document.querySelectorAll("#thumbnails");
    thumbs.addEventListener("click", function(e) {
             
    });
});
<div id="thumbnails">
    <img src="http://via.placeholder.com/350x150?text=Battle" title="Battle" />
    <img src="http://via.placeholder.com/350x150?text=Luneburg" title="Luneburg" />
    <img src="http://via.placeholder.com/350x150?text=Bermuda" title="Bermuda" />
    <img src="http://via.placeholder.com/350x150?text=Athens" title="Athens" />
    <img src="http://via.placeholder.com/350x150?text=Florence" title="Florence" />
</div>

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Примечание: Вы получаете ошибку, потому что вы вызываете addEventListener для возвращаемого значения querySelectorAll, то есть NodeList, у которого нет функции с именем addEventListener , Используйте querySelector вместо querySelectorAll.

Чтобы выполнить делегирование события, вам нужно установить прослушиватель события на одном из предков ваших элементов (например, #thumbnails), затем, когда происходит щелчок, проверьте, является ли цель события изображением: 

var container = document.querySelector("#thumbnails");        // select the ancestor, use querySelector instead of querySelectorAll

container.addEventListener("click", function(event) {         // add the click event listener to it
    var target = event.target;                                // when the click happens, get the target of the click
    if(target.matches("img")) {                               // check if the target is one of our img (the selector passed to "matches" could be any css selector, for example "#thumbnails > img", ...)
        console.log(target.title);                            // use the element, or whatever
    }
});

Пример: 

var container = document.querySelector("#thumbnails");

container.addEventListener("click", function(event) {
    var target = event.target;
    if(target.matches("img")) {
        console.log(target.title);
    }
});
<div id="thumbnails">
    <img src="http://via.placeholder.com/350x150?text=Battle" title="Battle" />
    <img src="http://via.placeholder.com/350x150?text=Luneburg" title="Luneburg" />
    <img src="http://via.placeholder.com/350x150?text=Bermuda" title="Bermuda" />
    <img src="http://via.placeholder.com/350x150?text=Athens" title="Athens" />
    <img src="http://via.placeholder.com/350x150?text=Florence" title="Florence" />
</div>
0 голосов
/ 14 мая 2018

Вы работаете с thumbs, массивом.Чтобы добавить прослушиватель событий для каждого из них, вам нужно будет выполнить цикл. 

  var thumbs = document.querySelectorAll("#thumbnails");
  thumbs.forEach(function(element){
    element.addEventListener("click", function(event) {
      // your code
   });
  });

Обновление 

  var thumbs = document.getElementById("thumbnails");
    thumbs.addEventListener("click", function(event) {
      // your code
      console.log(event.target);
   });
...