Проблемы с определением EventListener для ul элементов списка в javascript - PullRequest
Новая
       37

Проблемы с определением EventListener для ul элементов списка в javascript

0 голосов
/ 30 декабря 2018

Я добавляю элементы списка в javascript к ul id 'showDeck'.Я хочу инициализировать li-класс 'card' и добавить addEventListener, который затем будет изменять класс (форматирование CSS) элемента списка при нажатии. 

for (var i = 0; i < shuffledCards.length; i++) {
    var ul = document.getElementById("showingDeck");
    var li = document.createElement("li");
    li.innerHTML = shuffledCards[i];
    li.className = 'card';
    document.getElementById("showingDeck").appendChild(li);
    document.getElementById("showingDeck").addEventListener("click", processClicks(li));
};

processClicks запускается 16 раз без кликов и без кликовзарегистрируйтесь.

1 Ответ

0 голосов
/ 30 декабря 2018

Делегирование события

Если вы добавляете <li> динамически, то событие никогда не прикрепит их.Теги должны существовать при загрузке страницы, чтобы их можно было зарегистрировать.Поэтому вам нужно будет использовать Делегирование событий .

  • Сначала получите тег, соответствующий двум критериям:

    1. Должен существовать при загрузке страницы.
    2. Должен быть предком (родитель или родитель родительского или т. Д.) Тегов, которые вы хотите щелкнуть, навести и т. Д.

  • Следующая регистрация указанного тега для события (кстати, тег предка может быть даже document или window, но рекомендуется использовать их для ключевых событий или событий, не относящихся к DOM) 

    ancestorTag.addEventListener('event', callback);

  • Всякий раз, когда регистрируется событие, сгенерированное для тега предка или его потомков (потомков или потомков и т. Д.), Вызывается функция обратного вызова.

  • Именно в это время к тегу предка теперь можно ссылаться как event.currentTarget и, что более важно, к тегу, который был фактически нажат, завис над ERC... теперь обозначается как event.target.

  • Не имеет значения, имеет ли тег #id, .className, идентификатор студента иличто бы то ни было, потому что event.target будет именно этим тегом (в этом отношении: this).

Плюсы

  • Вы тольконужен один прослушиватель событий для неограниченного количества тегов

  • устранены проблемы с динамически добавленными тегами

  • Нет #ids, .classNames,свидетельства о рождении, эрк.необходим для идентификации тега, по которому щелкнули.

Минусы

  • Нет, поэтому мы никогда не должны использовать атрибуты on-event` илидобавить слушателей событий к сотне тегов.

Demo 

var list = document.getElementById('list');

list.addEventListener('click', callback);

function callback(event) {
  var clicked = event.target;
  var listener = event.currentTarget;
  if (clicked !== listener) {
    clicked.classList.toggle('active');
  } else {
    return false;
  }
  return false
}
.active {
  color: gold;
  background: #000;
}
<ul id='list'>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
</ul>
...