tl; dr - Получите полную карту каждого события в браузере с помощью этого пакета npm. Посмотрите результат запуска этого пакета в большом наборе браузеров и операционных систем в графическом представлении.

События в JavaScript

Мероприятия отличные.

Мы, как разработчики JavaScript, постоянно используем их при создании и улучшении веб-сайтов и веб-приложений. Они являются неотъемлемой частью JavaScript и необходимы разработчику, желающему создать плавный и успешный UX любого типа. И все же, когда дело доходит до событий в JavaScript, мы многого не знаем.

В основном это разнообразие - существует так много разных событий, которые могут прослушиваться JavaScript, а мы, как разработчики, почти не осознаем их.

Это знание заставило меня задуматься: «Почему для этого нет карты?» Вы знаете, как карта каждого события каждого объекта в JavaScript, которое можно прослушать. Такая карта определенно поможет мне немного лучше понять мир событий JavaScript и, вероятно, узнать о многих событиях, с которыми я даже не знаком!

И эта мысль привела меня к вопросу: «Как я могу получить эту информацию?» Сначала я попытался найти его в Интернете. Мне не удалось найти такую ​​карту - полную карту, в которой перечислены все объекты и все события, которые можно прослушивать под этими объектами (пожалуйста, поделитесь, если вы знаете о такой карте!).

Итак, что вы делаете, когда обнаруживаете, что в Интернете есть знания, которых не хватает? Вы помогите им!

Я понял, что создание такой карты не должно быть слишком сложным, если вы поймете, как работает подписка на события в JavaScript. Два основных метода подписки на события в JavaScript - это прослушиватели событий и обработчики событий. Давайте кратко рассмотрим эти два метода:

Слушатели событий Vs. Обработчики событий

Использование прослушивателей событий является мощным средством не только потому, что можно зарегистрировать более одного, но и потому, что может быть предоставлена ​​дополнительная конфигурация действия подписки на события. К сожалению, этот пост не об этом, и я не буду описывать эту часть прослушивателей событий, но это определенно то, что каждый разработчик JavaScript должен знать в совершенстве (я рекомендую вам прочитать об этом подробнее здесь). 2. event handlers: их можно использовать для регистрации тех же событий, что и прослушиватели событий, но другим и менее мощным способом. Обработчики событий - это фактические свойства прототипа объекта. Одновременно может быть только один обработчик событий для объекта и его события, и настройка обработчика событий, в отличие от прослушивателей событий, не является вариантом. Его настройка по умолчанию всегда будет аналогична эффекту вызова addEventListener с false в качестве третьего аргумента:

Когда дело доходит до объектов, которые не являются узлами DOM, есть один способ установить обработчик событий:

Однако, когда дело доходит до объектов, которые являются узлами DOM, установка обработчика событий также может быть достигнута с помощью API более высокого уровня атрибутов:

Помните, что тот факт, что есть два способа зарегистрировать обработчик событий для объекта, не означает, что может быть более одного обработчика! API атрибутов просто лежит поверх API обработчика событий нижнего уровня:

В конце концов, и event handlers, и event listeners регистрируют предоставленные обратные вызовы для одного и того же пула слушателей - между ними нет разницы, когда событие запускается!

Как эти знания могут помочь при перечислении «КАЖДОГО события, которое существует в браузере»?

Этап 1. Извлечение всех поддерживаемых событий прототипа объекта

На данный момент все довольно просто. Если обработчики событий являются свойствами объектов, то эти объекты должны содержать ссылку на эти обработчики в своих прототипах. Например, поскольку document.body поддерживает событие click, HTMLBodyElement должен иметь свойство onclick (независимо от того, является ли это его собственной собственностью или нет). Лучший способ получить все эти обработчики - перебрать прототип и найти их. Такие методы, как Object.keys() или Object.getOwnPropertyNames(), не помогут, если наша цель - получить ВСЕ свойства объекта, а не только его собственные свойства. Теперь то, что вам нужно искать в итерации, - это свойства, начинающиеся с on. Эти свойства по определению ссылаются на обработчики событий. Это должно выглядеть примерно так:

Прохладный! Теперь у нас есть две простые функции, которым мы можем предоставить прототип объекта и получить все поддерживаемые им события.

Этап 2. Извлечение всех поддерживаемых событий из прототипов всех объектов в браузере

Теперь все, что осталось сделать, - это динамически извлечь поддерживаемые события всех объектов, которые существуют в браузере (все, что находится под window), с помощью вспомогательных функций, которые мы только что реализовали выше. Это означает, что сначала нам нужно запустить_getEvents на самом window, чтобы получить все поддерживаемые им события. Затем нам нужно будет перебрать все собственные свойства window и получить все события, поддерживаемые этими свойствами (например, XMLHttpRequest является свойством window, поэтому нам также нужно будет получить поддерживаемые им события).

Вот и все! Теперь вызов getEvents() даст нам все события в браузере! И поскольку мы говорим о ОЧЕНЬ МНОГО событий, я не буду здесь документировать их все, но вы можете увидеть результат для себя прямо здесь: jsfiddle / github gist.

А как насчет КАЖДОГО события, которое существует в КАЖДОМ браузере?

Здесь становится еще интереснее. Теперь, когда у нас есть возможность составить список всех событий в браузере, почему бы не создать инструмент, который извлекает эту информацию из каждого браузера во всех операционных системах и создает полную карту из извлеченных данных?

Используя отличный продукт browserstack, я смог запустить getEvents() функцию в очень большом количестве браузеров и операционных систем, извлечь эти данные и представить их в графическом виде. Это представление находится прямо здесь, а весь список событий - прямо здесь. В последний раз я запускал код извлечения, когда Chrome 75 был последней версией, поэтому этот список может быть не полностью актуальным. Кроме того, этот список никоим образом не является исчерпывающим (например, в нем отсутствуют мобильные устройства), и я оставляю вам право прислать нам дополнительные устройства и браузеры, с которыми вы столкнетесь. Приглашаем вас помочь поддерживать этот список в актуальном состоянии!

Проект можно найти на github, а также использовать как пакет npm.

Надеюсь, эта статья и карта помогут пролить свет на разнообразие событий в JavaScript и помогут нам лучше понять и изучить их.

Это исследование было проведено и опубликовано Гал Вейцман от имени PerimeterX Inc.. Этот пост был впервые опубликован на официальном сайте PerimeterX.