Как удалить слушатели событий для элементов nodelist, если nodelist является аргументом функции?
- В первом случае слушатели удаляются, но я хотел бы передать
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>
- Передаю
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>
Вопросы:
- Как удалить слушатели событий во втором случае, а именно когда
nodelistпринимается функциейdirection_funcв качестве аргумента? - Во втором случае утерян
this, а если он понадобится, как его можно передать?