Наблюдаемый с событиями
Я читаю руководство по Angular.io, и в главе Observables я встретил этот фрагмент:
Создание с помощью настраиваемой функции fromEvent
function fromEvent(target, eventName) {
return new Observable((observer) => {
const handler = (e) => observer.next(e);
// Add the event handler to the target
target.addEventListener(eventName, handler);
return () => {
// Detach the event handler from the target
target.removeEventListener(eventName, handler);
};
});
}
Использовать настраиваемую функцию fromEvent
const ESC_KEY = 27;
const nameInput = document.getElementById('name') as HTMLInputElement;
const subscription = fromEvent(nameInput, 'keydown')
.subscribe((e: KeyboardEvent) => {
if (e.keyCode === ESC_KEY) {
nameInput.value = '';
}
});
Я знаю, что Observable - это объект, который использует функцию (подписчик) для вызова объекта с помощью методов для обработки передаваемых значений (наблюдатель).
Но в этом примере я не понимаю как передается переменная 'e' и то, как работает поток выполнения. Может кто-нибудь помочь мне понять это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это синтаксис ES6.
// ES6
const handler = (e) => observer.next(e);
// Equals to
const handler = function(e) {
return observer.next
}
document.addEventListener принимает название события и само событие:
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only
type
A case-sensitive string representing the event type to listen for.
listener
The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs. This must be an object implementing the EventListener interface, or a JavaScript function. See The event listener callback for details on the callback itself.
Подробнее об этом читайте в Веб-документы MDN.
Параметр 'e' в некотором смысле вызывается за рамками этого примера. Это параметр функции с именем «обработчик». Когда «обработчик» используется другой функцией, в данном случае addEventListener или removeEventListener, ему в этот момент будет предоставлен параметр, который будет представлять «e».
может быть яснее вот так:
function fromEvent(target, eventName) {
return new Observable((observer) => {
// Add the event handler to the target
target.addEventListener(eventName, (e) => {
// when event listener fires, call next on the observer with the event
// this sends the event to subscribers of the observable
observer.next(e)
});
return () => {
// clearly this doesn't work anymore as you have no reference to the handler
// so this creates a memory leak
// target.removeEventListener(eventName, handler);
};
});
}
Возможный дубликат Javascript: что такое параметр e (событие) и зачем передавать его функции javascript?