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.