Comments 15
Было бы неплохо подробнее расписать механизмы, за счет которых реализуется ваша оптимизация. Я так полагаю, что вы перехватываете событие на фазе погружения? тогда почему не указали, что передаете в addEventListener параметр capture: true? Это же по сути та основа, на которой стоит вся ваша оптимизация. Или вы используете какие-то другие особенности работы событий в DOM?
capture true не используется в реализации.
Событие перехватывается и вместо дефолтной фазы всплытия срабатывает кастомная для клика
Тогда не понятно, за счет чего достигается более быстрый отклик? Если использовать addEventListener без capture: true, то событие перехватиться на стадии всплытия. А на фазе всплытия событие достигает document позже, чем целевого элемента.
Когда речь идет о производительности, хочется видеть хоть какие-то бенчмарки.
Но, так ли это быстро? Как оказалось, это не быстро из-за специфики работы.
Почему клик в браузере будет медленнее, чем клик, обработанный через фреймворк?
Автор материала совершенно запутался в том, где JavaScript (функция обрабатывающая событие), где внешнее API ( генерация events и подписка на них - то есть связывание binding функции с событием) и что именно является узким горлышком.
На фоне чего, декларация на тему "синтетической обработке событий" в "современных" js фреймворках, вызывает неподдельный скепсис относительно того, что автор понимает о чем говорит.
Кажется будто автор гдето прочитал что addEventListener медленно, а в условном React есть SynteticEvent чтобы быстро и всё, побежал пилить.
ссылается на сторонний репозиторий, впечатляется цифрами, а понимания за счёт чего нет, какой-то карго культ.
Событие на document - это часть про делегирование. Специально закину ссылку на русскоязычный материал максимально упрощённый. https://learn.javascript.ru/event-delegation в частности это используют чтобы не делать 100500 одинаковых обработчиков в таблицах
В случае фреймворков с virtual dom типа React которые рендерят компонент каждое обновление (и зачастую пересоздают обработчик каждый перерендер) - это хак удешевляюший add и remove-eventlistener. Add EventListener на DOM получается один (условно при старте библиотеки). А новые обработчики цепляются к внутреннему для библиотеки массиву обработчиков, который просто js переменная. Удалить или добавить обработчик в такой js переменной дешевле чем обращаться к DOM.
Это не обязательно должен быть document. React, например, вынуждено переезжал из document в 17 версии.
https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation
А SynteticEvent это вообще другая концепция не связанная с делегированием. Вся статья про делегирование, а название не связано. SynteticEvent был нужен по той же причине почему был создан jquery - в разных браузерах API может отличаться, а тут универсальная обёртка, скрывающая неконсистентность. Например event.preventDefault в IE выглядит совсем не так как в современных браузерах
Чем отличается синтетическое событие клика от обычного в javascript фреймворках?