Приоритет события DOM

В каком порядке приоритета обрабатываются события в JavaScript?

Вот события в алфавитном порядке...

  1. onabort - загрузка изображения прервана
  2. onblur - элемент теряет фокус
  3. onchange - пользователь меняет содержимое поля
  4. onclick - щелчок мышью по объекту
  5. ondblclick - мышь дважды щелкает объект
  6. onerror - при загрузке документа или изображения возникает ошибка
  7. onfocus - элемент получает фокус
  8. onkeydown - нажата клавиша клавиатуры
  9. onkeypress - Клавиша клавиатуры нажата или удерживается
  10. onkeyup - клавиша клавиатуры выпущена
  11. onload - страница или изображение загружены
  12. onmousedown - нажата кнопка мыши
  13. onmousemove - мышь перемещается
  14. onmouseout - мышь перемещается от элемента
  15. onmouseover - мышь наводится на элемент
  16. onmouseup - кнопка мыши отпущена
  17. onreset - нажата кнопка сброса
  18. onresize - размер окна или рамки изменяется
  19. onselect - текст выделен
  20. onsubmit - нажата кнопка отправки
  21. onunload - пользователь покидает страницу

В каком порядке они обрабатываются в очереди событий?

Приоритет не в порядке "первым пришел - первым вышел" (FIFO), или я так считаю.

4 ответа

Решение

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

Тем не менее, в проекте рекомендации HTML 5 делается попытка указать, как события будут помещаться в очередь и отправляться - цикл обработки событий:

Для координации событий, взаимодействия с пользователем, сценариев, рендеринга, работы в сети и т. Д. Пользовательские агенты должны использовать циклы событий, как описано в этом разделе.

Должен быть по крайней мере один цикл событий для каждого пользовательского агента и не более одного цикла событий на единицу связанных контекстов просмотра аналогичного происхождения.

Цикл событий имеет одну или несколько очередей задач. Очередь задач представляет собой упорядоченный список задач [...] Когда пользовательский агент ставит задачу в очередь, он должен добавить данную задачу в одну из очередей задач соответствующего цикла событий. Все задачи из одного конкретного источника задач всегда должны добавляться в одну и ту же очередь задач, но задачи из разных источников могут быть помещены в разные очереди задач. [...]

[...] пользовательский агент может иметь одну очередь задач для событий мыши и клавиш (источник задачи взаимодействия с пользователем), а другую - для всего остального. Затем пользовательский агент может отдавать предпочтение событиям клавиатуры и мыши по сравнению с другими задачами в течение трех четвертей времени, сохраняя интерфейс отзывчивым, но не оставляя без внимания другие очереди задач, и никогда не обрабатывать события из какого-либо одного источника задач из строя. [...]

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

Для тех, кто хочет знать последовательность относительных событий, см. Ниже. Пока что я тестировал только в Chrome.

  1. Mouseover
  2. MouseMove
  3. MouseOut

  1. MouseDown
  2. изменить (на целевом входе)
  3. размытие (на сфокусированном элементе)
  4. фокус
  5. MouseUp
  6. щелчок
  7. DblClick

  1. KeyDown
  2. нажатие клавиши
  3. KeyUp

Если вы смотрите на события мыши / прикосновения, Патрик Х. Лаук опубликовал доклад на эту тему. Определенно интересное чтение - и имеет дело со всеми причудами разных браузеров, разных устройств и разных стандартов.

Он также связывает полный набор тестов.

Вот демонстрация ряда мероприятий:

Другие вопросы по тегам