Всем привет, я не особо понимаю почему один код работает

а другой нет, и в чём концептуальная их разница.

Контекст: я хочу сделать атрибут который будет проверять валидность расширения выбранного файла, что бы расширение выбранного файла было как в accept. То есть если выбранный файл, отличается от того что мы кинули в accept - у нас блокируется обработка события и показывается модалка.
То есть у меня в html что-то такого:
<input fileUpload type="file" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" (change)="типметод($event)">
fileUpload - моя директива.

Я сделал что-то такого изначально, код внутри директивы:
@HostListener("change", ["$event"])
public onChange(event: any): void
{
event.preventDefault();
event.stopPropagation();
}
Но этот код не работает как нужно. То есть он ловит событие change у input, но он не останавливает обработку события change повешенное на input.

Я уже почти сдался и думал имплементить свой контрол для этой задачи как наткнулся на такой код, он в ngOnInit:
this.subscription = fromEvent(input.parentNode, 'change', {capture: true}).subscribe((event: Event) => {
if (event.target == input) {
event.preventDefault();
event.stopPropagation();
}
});
Самое крутое в этом коде то что он работает и решил моё задачу. Но я нихера не понимаю какое отличие моего варианта с этим. То есть я не понимаю почему мой вариант не работает, а этот вариант работает. Не подскажите с этим?

потому что захват происходит раньше чем всплытие?

Не знал про такие понятие, спасибо. Прочитал об этом, хорошо, теперь я понимаю вроде бы что это в общих чертах. По сути в втором случае у нас событие изначально вызывается на родительском компоненте, так как мы через него подписались с capture true, и оставаливаем дальнейшее погружение, окей. Звучит для меня логично почему это работает в 2 случае. А почему первый не работает? То есть у нас директива сначала ловит событие, а потом обрабатывается уже повешенный change event (который на input). При этом если в директиве прекратить обработку то оно никак не повлияет на уже повешенный change event.

есть еще одна фаза) может поэтому

Так ну я прочитал что 3 фразы, всплытие, перехват и текущая стадия. Если в 2 случае мы работаем с перехватом события с помощью родительского компонента и его прерываем, то в 1 случае мы ж работает в пределах одного инпута

события происходят на одном елементе, там нет захвата и всплытия

Тогда почему может быть такая ситуация что нельзя прервать выполнение в HostListener? У меня есть идея что из-за HostListener и change создаётся два события по сути, и из-за этого нельзя никак повлиять из одного события на другое. Но хром показывает для этого инпута всё таки один обработчик, ну или я не понимаю как проверить эту теорию с двумя событиями

> Тогда почему может быть такая ситуация что нельзя прервать выполнение в HostListener? как ты его прерываешь?

@HostListener("change", ["$event"]) public onChange(event: any): void { event.preventDefault(); event.stopPropagation(); }