Por ejemplo, tengo la siguiente función para ejecutar cuando ocurre el evento mouseup .
const listener = (element: HTMLElement, e: MouseEvent): void => { if (e.target instanceof Element && element && !element.contains(e.target)) { element.style.backgroundColor = 'red'; } } Luego, estoy tratando de descubrir cómo agregar un element de parámetro adicional al listener y eliminarlo cuando ya no sea necesario.
function addEventListener (element: HTMLElement) => { window.document.addEventListener('mouseup', (e) => listener(element, e)); } function removeEventListener (element: HTMLElement) => { window.document.removeEventListener('mouseup', ?? ); }¿Como puedó resolver esté problema?
Intenté usar bind como se muestra a continuación, pero MouseEvent no puede enlazar antes de 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); }¿Debo usar el cierre aquí como a continuación?
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); }De la misma manera que normalmente elimina un detector de eventos, pero almacena un mapa (diccionario) que asigna un HTMLElement a una función:
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; } }