Приоритет события DOM - PullRequest
       27

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

54 голосов
/ 12 ноября 2008

В каком порядке приоритета обрабатываются события в 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), или я так считаю.

Ответы [ 3 ]

34 голосов
/ 12 ноября 2008

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

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

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

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

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

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

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

16 голосов
/ 08 июня 2016

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

  1. Mouseover
  2. MouseMove
  3. MouseOut

  1. MouseDown
  2. изменение (при сфокусированном вводе)
  3. размытие (на сфокусированном элементе)
  4. фокус
  5. mouseup
  6. нажмите
  7. dblclick

  1. KeyDown
  2. 1032 * нажатие клавиши *
  3. KeyUp
4 голосов
/ 09 октября 2014

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

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

...