Как удалить слушатели событий для элементов nodelist, если nodelist является аргументом функции?

  1. В первом случае слушатели удаляются, но я хотел бы передать nodelist в функцию direction_func в качестве аргумента, а не заново делать document.querySelectorAll('#radio-list input'):

"use strict";

document.addEventListener("DOMContentLoaded", pageLoadedHandler);

function pageLoadedHandler() {
  console.log('завершена загрузка и построение DOM документа');

  let dir_rad_collection = document.querySelectorAll('#radio-list input');

  if (dir_rad_collection.length !== 0) {
    dir_rad_collection.forEach((direction_radio) => {
      direction_radio.addEventListener('change', direction_func);
    });
  }

};


function direction_func(event) {
  let changed_direction;

  if (event.target.id === 'field-1') {
    changed_direction = 'West';
  } else if (event.target.id === 'field-2') {
    changed_direction = 'North';
  } else return;

  
  //здесь будет отправляться аякс запрос дин раз, когда пользователь выбрал один из radio
  //при дальнейших выборах radio аякс запрос отправлять не нужно

  //поэтому нужно удалить все слушатели события для radio
  //на radio в будущем планирую вешать еще один слушатель для другой функции

  console.log(this);/*как видно this не утерян, насколько я предполагаю
  не утерян он т.к. функция не является анонимной, но в данном случае this мне не нужен,
  а нужен мне event, он используется в начале этой функции*/

  //но также мне нужен nodelist, ссылка на который лежит в переменной dir_rad_collection
  //нужен он мне чтобы удалить слушатели 

  //можно так удалить, но я хочу nodelist передать как аргумент функции: direction_func
  let dir_rad_collection2 = document.querySelectorAll('#radio-list input');
  if (dir_rad_collection2.length !== 0) {
    dir_rad_collection2.forEach((direction_radio) => {
      direction_radio.removeEventListener('change', direction_func);
    });
  }

}
  <ul id="radio-list">
    <li>
      <input type="radio" id="field-1" name="direction" value="west">
      <label for="field-1">West</label>
    </li>
    <li>
      <input type="radio" id="field-2" name="direction" value="north">
      <label for="field-2">North</label>
    </li>
    <li>
      <input type="radio" id="field-3" name="direction" value="east">
      <label for="field-3">East</label>
    </li>
  </ul>

  1. Передаю nodelist в функцию direction_func в качестве аргумента и пытаюсь удалить слушатели:

"use strict";

document.addEventListener("DOMContentLoaded", pageLoadedHandler);

function pageLoadedHandler() {
  console.log('завершена загрузка и построение DOM документа');

  let dir_rad_collection = document.querySelectorAll('#radio-list input');

  if (dir_rad_collection.length !== 0) {
    dir_rad_collection.forEach((direction_radio) => {
      direction_radio.addEventListener('change', function(event) { direction_func(event, dir_rad_collection)});
    });
  }

};


function direction_func(event, some_collection) {
  let changed_direction;

  //console.log(event.target);
  if (event.target.id === 'field-1') {
    changed_direction = 'West';
  } else if (event.target.id === 'field-2') {
    changed_direction = 'North';
  } else return;

  console.log(this);//как видно this утерян, т.к. в слушателе анонимная функция
  //а у анонимных функций нет своего this вроде

  some_collection.forEach((collection_item) => {
    collection_item.removeEventListener('change', (event) => direction_func(event, dir_rad_collection));
    //как видно слушатели событий не удалились, тк в слушателях анонимная функция,
    //а удалить слушатели можно только если будет неанонимная функция
  });

}
  <ul id="radio-list">
    <li>
      <input type="radio" id="field-1" name="direction" value="west">
      <label for="field-1">West</label>
    </li>
    <li>
      <input type="radio" id="field-2" name="direction" value="north">
      <label for="field-2">North</label>
    </li>
    <li>
      <input type="radio" id="field-3" name="direction" value="east">
      <label for="field-3">East</label>
    </li>
  </ul>

Вопросы:

  1. Как удалить слушатели событий во втором случае, а именно когда nodelist принимается функцией direction_func в качестве аргумента?
  2. Во втором случае утерян this, а если он понадобится, как его можно передать?

Ответы (0 шт):