Why does removeEventListener?

Read a lot of topics on this subject, but I can not understand why the handler is not removed from the item. This script is designed for the locking focus tab on the item and then return to its original state.

document.addEventListener('click', (e) => {
 let target = e.target
 open = target.dataset.open ? target.dataset.open : 0,
 close = target.dataset.close ? target.dataset.close : 0,
 element = open || close ? document.querySelector(`[data-window=${open || close}]`) : 0,
 focused = trapFocus.bind(null, element);

 if (open) {
element.classList.add(`${element.dataset.window}-open`);
 element.addEventListener('keydown', focused);
}

 if (close) {
element.classList.remove(`${element.dataset.window}-open`);
 element.removeEventListener('keydown', focused);
}
});

const trapFocus = (element, event) => {
 let focusableElement = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'),
 firstFocusableElement = focusableElement[0],
 lastFocusableElement = focusableElement[focusableElement.length - 1];

 if (!(event.key === 'Tab' || event.keyCode === 9)) { return; }

 if (event.shiftKey) {
 if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus();
event.preventDefault();
}
 } else {
 if (document.activeElement === lastFocusableElement) {
firstFocusableElement.focus();
event.preventDefault();
}
}
};
March 20th 20 at 11:43
2 answers
March 20th 20 at 11:45
Solution
const focusedCallbacks = new WeakMap();
document.addEventListener('click', (e) => {
 let target = e.target
 open = target.dataset.open ? target.dataset.open : 0,
 close = target.dataset.close ? target.dataset.close : 0,
 element = open || close ? document.querySelector(`[data-window=${open || close}]`) : 0,


 if (open) {
element.classList.add(`${element.dataset.window}-open`);
 focusedCallback.set(element,trapFocus.bind(null, element));
 element.addEventListener('keydown', focusedCallback.get(element));
}

 if (close) {
element.classList.remove(`${element.dataset.window}-open`);
 element.removeEventListener('keydown', focusedCallback.get(element));
focusedCallback.delete(element);
}
});
In the name of the constant error, and everything is super! Thank you! - josiane_Mante88 commented on March 20th 20 at 11:48
@Lamont_OConnell, not really a very good method, you twice make the set and a reference to the function will be lost.
It is necessary, before attaching the listener to always remove the previous one if there is one. - Verner.Renner62 commented on March 20th 20 at 11:51
March 20th 20 at 11:47
Solution
because he focused that you pass when you try to remove the listener, it's a different instance from the one that was created when you added.
Wrap in (f() {}) () or a regular function? - brain.Zeml commented on March 20th 20 at 11:50
@Flossi, what's life going to help? he focused be re-created with every click. - wilbert.Heathcote75 commented on March 20th 20 at 11:53
@Annalise_Herman71, well, if usual in a normal function? Let inside bind function does two different links but the wrapper together. - brain.Zeml commented on March 20th 20 at 11:56
@Annalise_Herman71and accurately. - brain.Zeml commented on March 20th 20 at 11:59

Find more questions by tags JavaScript