В чем разница между Listener и Observer?

Listener и Observer оба реагируют на события/изменения, но Listener — это конкретная функция-обработчик события, а Observer — объект/паттерн подписки на изменения состояния субъекта.

Listener (слушатель)

Функция, привязанная к конкретному событию элемента/эмиттера. Реагирует на дискретные события:

button.addEventListener('click', listener); // listener — функция-обработчик
emitter.on('data', listener);

• Простая связь: событие → обработчик.
• Часто много слушателей на разные события.
• Термин из событийной модели DOM/EventEmitter.

Observer (наблюдатель)

Объект, подписанный на изменения состояния субъекта (паттерн Observer). Субъект уведомляет всех наблюдателей:

subject.subscribe(observer); // observer реагирует на изменения субъекта

• Паттерн проектирования: субъект хранит список наблюдателей, уведомляет их при изменении.
• Реагирует на изменение состояния, не обязательно на дискретное событие.
• Примеры: MobX, RxJS, реактивность.

Различия

• Listener — функция-обработчик конкретного события (событийная модель).
• Observer — объект-подписчик на изменения состояния (паттерн проектирования).
• Listener проще и «плоский»; Observer — структурированный паттерн с субъектом и уведомлениями.

На практике

Термины часто пересекаются: addEventListener реализует идею наблюдения. Но формально Observer — паттерн, Listener — обработчик.

Коротко для собеседования

Listener — функция-обработчик конкретного события (addEventListener, событийная модель). Observer — объект-подписчик на изменения состояния субъекта (паттерн Observer, как в MobX/RxJS). Listener проще и про дискретные события; Observer — структурированный паттерн уведомления об изменениях состояния.