Как отвязать событие от document?

Question

[safo4eg]

let wrapperItems = document.querySelectorAll('.wrapper div');
let years = document.querySelector('#years');
let yearsList = years.firstElementChild;

let arrayCounters = [0, 0, 0];
let counter = 0;

function activateListItem() {
    ;(function hideRestItems() {
        wrapperItems.forEach((elem, item) => {
            if(elem != this) {
                elem.style.overflow = 'hidden';
            }
        });
    })();
    
    let obj = this;
    this.style.overflow = 'visible';
        
    document.addEventListener('keydown', changeListItem); // ВОТ ЭТО!
        
    function changeListItem(event) {
        wrapperItems.forEach(function(elem, index) {
           if(elem == obj) {
               counter = arrayCounters[index];
           } 
        });
        
        if(event.code === 'ArrowUp') {
            counter += -20;
            obj.firstElementChild.style.top = `${counter}px`;
        } else if (event.code === 'ArrowDown') {
            counter += 20;
            obj.firstElementChild.style.top = `${counter}px`;
        }
         
        wrapperItems.forEach((elem, index) => {
            if(elem == obj) {
                arrayCounters[index] = counter;
            }
        });
    }
}

wrapperItems.forEach((elem) => {
   elem.addEventListener('click', activateListItem); 
});

Суть такая: есть три списка, при клике на любой из них overflow: hidden; и могу с помощью стрелочек листать этот список, но при клике на, допустим другой, и если начинаю его листать, то предыдущий тоже листается, как это убрать? Пытался отвязать во всех местах кода этот обработчик(подписан "вот это") и во время проверки != элемент, который сейчас повешан обработчик основнов

codepen(кликните на первое, потом на второе и попробуйте полистать с помощью стрелочек вверх - вниз):
https://codepen.io/Safo4eg/full/BarZOWK

Буду благодарен даже не решению, а материалу, который подробней мне нужно изучить (повторить), чтобы справиться с этим

Answer 1

[safo4eg]

Поставленную проблему решил путем обьявления переменной obj, к которой присваиваю this дабы решить проблему потери контекста, глобальной переменно. Тогда работает всё корректно, не понимаю, почему так?

На ум приходит только, что при каждом клике на список в событии keydown обьекта document создаётся своя локальная obj и потом событие обьекта document применяется ко всем этим obj, а если обьявляю глобально, то она постоянно меняется и применяется лишь к одной? Это лишь мои догадки, знаний не хватает, может кто-нибудь обьяснить что там на самом деле и как? голова уже кипит

Comments

[Ivan1331]

Я когда вначале ответил, не совсем вникнул в код, честно он очень странный, у вас в функции есть iife функция, потом а рядом внутри ещё пару функций объявлено, сложно понятно что к чему, в общем хаос.
Так вот проблема у вас какая? При листании, листаются и другие списки, раннее открытые?
Вот причина:

document.addEventListener('keydown', changeListItem);

Вы вешаете обработчик, к примеру при клике на первый список, листаете. Далее кликаете на второй список. Добавили в обработчик, НО! В обработчике то конечно уже хранится что делать при событии 'keydown', он двигает как первый, так и второй, конечно же там у него хранится локально obj, который был на момент когда вы этот обработчик повесили. Так что вам нужно после отработки слушателя, его снимать, removeEventListener.
Ну или то как вы это сделали
П.С. а conter вы всё таки зря не обнуляете. Полистайте вниз первый список раз 5, а потом второй, не замечаете что оно сразу рывок вниз делает?

Answer 2

[Ivan1331]

wrapperItems.forEach((elem, index) => {
            if(elem == obj) {
                arrayCounters[index] = counter;
                counter=0; // Вы забыли обнулить counter после каждого изменения
            }
        });

Comments

[safo4eg]

Не, вопрос не в этом, здесь пока всё корректно работало: связал массив counter 1 2 3 и элементы списка , первый список привязан к первому из массива каунтеров и у всех изначально там по 0, а другие я специально сохраняю, чтобы не терять и не перескакивало через несколько элементов.

Вопрос в друг, если я после клика на первый список сразу кликаю на второй, то они начинают оба сихнронно листаться, это как исправить, не подскажите?

[safo4eg]

Я понимаю, что как-то нужно отвязать, везде уже пытался вставить отвязыывание, не выходит