Почему мы используем для l oop за пределами addEventListener? - PullRequest
Новая
       25

Почему мы используем для l oop за пределами addEventListener?

0 голосов
/ 25 марта 2020

Код указан ниже: 

var lis = document.querySelectorAll("li");

for(var i=0; i< lis.length ; i++){
   lis[i].addEventListener("click",function(){
      this.style.color = "pink";
   }); 
}
<ul>
  <li>Hi</li>
  <li>There</li>
  <li>How are you today?</li>
</ul>

Я знаю, этот код хочет изменить конкретный элемент li, на который нажали. В моей концепции, что я получил, для l oop имеет порядок от 0 до 2.

, но если я нажму третий элемент li (это означает <li>How are you today?</li>), третий цвет будет изменилось на розовый, затем я щелкнул первый элемент li (это означает <li>Hi</li>), цвет тоже будет изменен.

Так что я не знаю, почему for l oop находится снаружи addEventListener?

, и прежде чем я вызову событие "щелчок", значение for l oop i уже будет подсчитано до 3.

Не означает ли это for l oop условие ложно?

Кроме того, я нажимаю li элемент, который отличается от первого, порядок нажатия - случайный, почему for l oop все еще работает?

Буду признателен за любой ответ от любого из вас.

Спасибо

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Что делает для l oop, так это добавляет прослушиватели кликов к каждому из ваших li s. Когда пользователь нажимает на один из элементов, срабатывает функция (handleClick ниже). Я переработал код, так что, возможно, его легче читать. .bind(li[i]) добавляет правильный контекст к функции, поэтому this работает в handleClicks. 

var lis = document.querySelectorAll("li");

for(var i=0; i < lis.length; i++){
  // lis[i].addEventListener("click", handleClick.bind(li[i]));
  lis[i].addEventListener("click", handleClick);
}

function handleClick() {
  this.style.color = "pink";
}
<body>
  <ul>
    <li>Hi</li>
    <li>There</li>
    <li>How are you today?</li>
  </ul>
</body>
0 голосов
/ 25 марта 2020

for l oop перечисляет все li теги в вашем документе. Вызов addEventListener выполняется внутри for l oop, чтобы связать функцию, которая окрашивает текст в розовый цвет, при щелчке по текущему перечисляемому элементу.

Другими словами, когда вы нажимаете на элемент, он запускает анонимную функцию, которую вы передали в вызове addEventListener, а не весь скрипт: 

function(){
   this.style.color = "pink";
}

for l oop выполняется только один раз, когда тег скрипта загружается в ваш документ.

...