Странное поведение скрипта js?

Question

[dch3]

html разметка

...
<table>

   <tr>
      <td hidden>1</td>
      <td><input type="checkbox"></td>
      <td>a1</td>
      <td>b1</td>
   </tr>

   <tr>
      <td hidden>2</td>
      <td><input type="checkbox"></td>
      <td>a2</td>
      <td>b2</td>
   </tr>

   <tr>
      <td hidden>3</td>
      <td><input type="checkbox"></td>
      <td>a3</td>
      <td>b3</td>
   </tr>

</table>
  ...

<button type="button" name="remove">Удалить</button>

скрипт js

const destroyBtn = document.querySelector('button[name="remove"]');
const hidden = document.querySelectorAll('td[hidden]');
const checkbox = document.querySelectorAll('td > input');

for (let i = 0; i < checkbox.length; i++) {
   checkbox[i].addEventListener('change', () => {
      if (checkbox[i].checked) {
         let id = hidden[i].innerHTML;         
         destroyBtn.addEventListener('click', () => { console.log(id )};

В итоге, поочередно ставя флажки в чекбоксах с 1-го по 3-й (т.е. ставлю на 1-й и нажимаю "удалить";
снимаю флажок с 1-го, ставлю на 2-й и нажимаю "удалить" и т.д.) и нажимая кнопку удалить, я получаю следующий вывод:
1
*****
2
*****
1
2
3
***

Почему третий вывод отображает сразу все три значения, а не одно значение "3"?
Спасибо за ответы!

Answer 1

[Вадим]

у вас и во втором случае выводится не 2 ***, а 1 *** 2 ***.
вы добавляете обработчик на каждый раз, а не переопределяете его. вот они и срабатывают все. сначала только 1 обработчик клика, потом 2, потом 3.

Comments

[dch3]

@MrDecoy
Спасибо!
Подскажите, а как переопределяется обработчик?
может через removeEventlistener?

[Вадим]

dch3, ну тут разные могут быть варианты. Зависит от того, что Вы в итоге хотите получить.
Переопределение обработчика клика - звучит криво.
Будто бы нужно сделать как-то иначе. Но без контекста - можно лишь предполагать.

А так да. Функция должна быть именованной. И тогда перед добавлением нового обработчика клика, старый по имени нужно удалить.

[dch3]

Вадим,
Спасибо и еще один вопрос)))

Ну никак понять не могу почему обработчик так себя ведет?

... они и срабатывают все. сначала только 1 обработчик клика, потом 2, потом 3

Еще раз перечитал доку про всплытия и перехват. Мистика какая-то... как-будто все срабатывания обработчика куда-то записываются

[dch3]

@MrDecoy
Мне кажется я понял)

Т.к. у меня при снятии и установке флажка под событие "change" попадают оба элемента, вот они и выводятся

[Вадим]

dch3, Ну смотрите, давайте максимально упростим Ваш код. Так сказать, как его видит браузер, отбросив не нужные детали:

const btn = document.querySelector('button[name="remove"]');
[1,2,3].forEach(id => {
  btn.addEventListener('click', () => console.log(id))
})

То есть Вы в цикле добавляете три обработчика клика.

Итого имеем:
1) У кнопки нет обработчиков клика
2) Первая итерация цикла - добавляем обработчик клика с console.log(1). Всего обработчиков клика: 1.
3) Вторая итерация цикла - добавляем обработчик клика с console.log(2). Всего обработчиков клика: 2.
4) Третья итерация цикла - добавляем обработчик клика с console.log(3). Всего обработчиков клика: 3.
5) Производим клик - запускаем по очереди 3 обработчика клика в порядке добавления. Сначала из шага 2, потом из шага 3, потом из шага 4. Получаем на один клик - три консоль лога.

То есть добавление нового обработчика клика не удаляет предыдущий обработчик клика.

Внутри, под капотом, это можно представить в виде массива.
Каждый раз, когда Вы вызываете метод .addEventListener() то внутрь элемента, в массив, добавляется очередной обработчик.
А когда пользователь производит клик, то движок идёт в этот массив и по очереди запускает все обработчики, которые есть в массиве.

[Вадим]

dch3,

Мне кажется я понял)

Не совсем.

Смотрите, ещё раз, прочитаем Ваш код, но на русском:

Добавить на все чекбоксы обработчик события change.
Внутри обработчика события change добавить на кнопку обработчик события click.

Таким образом, каждый раз, когда любой из чекбоксов будет менять своё состояние, то есть будет происходить событие change, на кнопку будет добавляться новый обработчик события click.

Можете проверить это: нажимайте на чекбокс пока не надоест, ну раз 5, например, на один и тот же, а потом 1 раз нажмите на кнопку "удалить". И вот сколько раз Вы изменили состояние чекбокса, столько раз получите вывод в консоль.

[dch3]

Вадим
Большое спасибо!!!

[dch3]

@MrDecoy
Я сильно извиняюсь, но у меня по этой теме появилась еще одна проблемка...

Пытаюсь удалить удалить событие "click" из элемента checkbox[i] после того, как оно сработало, как мы с вами и обсуждали.

А проблема в следующем:
вот мой скрипт js

class Modify  {

connectToServer (id) {

функция передает данные на сервер и получает ответ

}

changeData() {

ее мы с вами обсуждали ранее

   const destroyBtn = document.querySelector('button[name="remove"]');
   const hidden = document.querySelectorAll('td[hidden]');
   const checkbox = document.querySelectorAll('td > input');

   for (let i = 0; i < checkbox.length; i++) {
      checkbox[i].addEventListener('change', () => {
         if (checkbox[i].checked) {
            let id = hidden[i].innerHTML; 
     
   <b>старый код: </b>  
           destroyBtn.addEventListener( 'click', () =>  this.connectToServer (id) );

   <b>новый код:</b>
           function func () {
              return this.connectToServer (id);
           }
           destroyBtn.addEventListener( 'click',  func );
           destroyBtn.removeAddEventListener( 'click',  func );

}
}

Так вот при клике на " destroyBtn" консоль выдает ошибку, что функция this.connectToServer (id)

Uncaught TypeError: this.requestToServer is not a function
at HTMLButtonElement.func

Но, если я использую стары вариант со стрелочной функцией, то такой ошибки нет.
Подскажите почему так? Может из-за области видимости

[Вадим]

dch3, внутри обработчиков событий this - элемент на котором произошло событие