For example, I have below function to execute when mouseup event occurs.
const listener = (element: HTMLElement, e: MouseEvent): void => {
if (e.target instanceof Element && element && !element.contains(e.target)) {
element.style.backgroundColor = 'red';
}
}
Then I am trying to figure out how to add extra paramter element to listener and remove it when it is not required anymore.
function addEventListener (element: HTMLElement) => {
window.document.addEventListener('mouseup', (e) => listener(element, e));
}
function removeEventListener (element: HTMLElement) => {
window.document.removeEventListener('mouseup', ?? );
}
How can I solve this problem?
I tried using bind like below, but MouseEvent cannot bind before addEventListener.
let callback;
function addEventListener (element: HTMLElement) => {
// how can I bind `MouseEvent`?
callback = listener.bind(this, element, ??);
window.document.addEventListener('mouseup', callback);
}
function removeEventListener (element: HTMLElement) => {
window.document.removeEventListener('mouseup', callback);
}
Should I use closure here like below?
function createListener(element: HTMLElement) {
return (e: MouseEvent) => {
listener(element, e);
}
}
let callback;
function addEventListener (element: HTMLElement) {
callback = createListener(account);
window.document.addEventListener('mouseup', callback);
}
function removeEventListener (element: HTMLElement) => {
window.document.removeEventListener('mouseup', callback);
}
The same way you remove an event listener normally, but store a Map (dictionary) that maps an HTMLElement to a function:
const callbacks = new Map<HTMLElement, (e: MouseEvent) => void>();
function addEventListener (element: HTMLElement) => {
const callback = (e) => listener(element, e);
callbacks.set(element, callback);
window.document.addEventListener('mouseup', callback);
}
function removeEventListener (element: HTMLElement) => {
const callback = callbacks.get(element);
if(callback)
{
window.document.removeEventListener('mouseup', callback);
delete callback;
}
}