stringtranslate.com

событие DOM

События DOM (Document Object Model) — это сигнал о том, что что-то произошло или происходит, и могут быть вызваны взаимодействием пользователя или браузером. [1] Клиентские языки сценариев, такие как JavaScript , JScript , VBScript и Java, могут регистрировать различные обработчики событий или прослушиватели на узлах элементов внутри дерева DOM , например, в документах HTML , XHTML , XUL и SVG .

Примеры событий DOM:

Исторически, как и DOM, модели событий, используемые различными веб-браузерами, имели некоторые существенные различия, которые вызывали проблемы совместимости. Чтобы бороться с этим, модель событий была стандартизирована Консорциумом Всемирной паутины (W3C) в DOM Level 2.

События

HTML-события

Общие события

Существует огромная коллекция событий, которые могут быть сгенерированы большинством узлов элементов:

Обратите внимание, что приведенная выше классификация событий не совсем совпадает с классификацией W3C.

Обратите внимание, что события, имена которых начинаются с «DOM», в настоящее время поддерживаются недостаточно хорошо, и по этой и другим причинам производительности они устарели по версии W3C в DOM Level 3. Mozilla и Opera поддерживают DOMAttrModified , DOMNodeInserted , DOMNodeRemoved и DOMCharacterDataModified . Chrome и Safari поддерживают эти события, за исключением DOMAttrModified .

События касания

Веб-браузеры, работающие на сенсорных устройствах, таких как iOS от Apple и Android от Google , генерируют дополнительные события. [9] : §5.3 

В проекте рекомендации W3CTouchEvent a предоставляет a TouchListместоположений Touch, активные клавиши-модификаторыTouchList , a местоположений Touchв целевом элементе DOM и a TouchListместоположений Touch, которые изменились с момента предыдущего TouchEvent. [9]

Apple не присоединилась к этой рабочей группе и задержала рекомендацию W3C по своей спецификации сенсорных событий, раскрыв патенты на позднем этапе процесса рекомендации. [10]

События указателя

Веб-браузеры на устройствах с различными типами устройств ввода, включая мышь, сенсорную панель и перо, могут генерировать интегрированные события ввода. Пользователи могут видеть, какой тип устройства ввода нажат, какая кнопка нажата на этом устройстве и насколько сильно нажата кнопка, если речь идет о стилусе. По состоянию на октябрь 2013 года это событие поддерживается только Internet Explorer 10 и 11. [11]

События инди-пользователя

Рабочие группы Indie UI, которые пока еще не реализованы, хотят помочь разработчикам веб-приложений поддерживать стандартные события взаимодействия с пользователем без необходимости обрабатывать различные технические события, специфичные для платформы, которые могут с ними совпадать. [12]

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

Например, авторам веб-приложений, желающим перехватить намерение пользователя отменить последнее действие, необходимо «прослушивать» все следующие события:

Было бы проще ожидать один нормализованный запрос на «отмену» предыдущего действия.

События, специфичные для Internet Explorer

В дополнение к общим (W3C) событиям, два основных типа событий добавлены Internet Explorer . Некоторые из событий были реализованы как фактические стандарты другими браузерами.

Обратите внимание, что Mozilla, Safari и Opera также поддерживают событие readystatechange для объекта XMLHttpRequest . Mozilla также поддерживает событие beforeunload, используя традиционный метод регистрации событий (DOM Level 0). Mozilla и Safari также поддерживают contextmenu, но Internet Explorer для Mac — нет.

Обратите внимание, что Firefox 6 и более поздние версии поддерживают события beforeprint и afterprint.

XUL-события

В дополнение к общим (W3C) событиям Mozilla определила набор событий, которые работают только с элементами XUL . [ необходима ссылка ]

Другие события

Для Mozilla и Opera 9 также существуют недокументированные события, известные как DOMContentLoaded и DOMFrameContentLoaded, которые срабатывают при загрузке содержимого DOM. Они отличаются от «load», поскольку срабатывают до загрузки связанных файлов (например, изображений). Однако DOMContentLoaded был добавлен в спецификацию HTML 5. [13] Событие DOMContentLoaded также было реализовано в движке рендеринга Webkit сборки 500+. [14] [15] Это соответствует всем версиям Google Chrome и Safari 3.1+. DOMContentLoaded также реализован в Internet Explorer 9. [ 16]

Opera 9 также поддерживает события Web Forms 2.0 DOMControlValueChanged , invalid , forminput и formchange .

Поток событий

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

W3C занимает промежуточную позицию в этой борьбе. [18] : §1.2 

По данным W3C, события проходят три фазы, когда цель события участвует в дереве:

  1. Фаза захвата: событие перемещается от корневой цели события к цели события.
  2. Фаза цели: событие проходит через цель события
  3. Фаза пузыря ( необязательно ): событие возвращается от цели события к корневой цели события. Фаза пузыря будет происходить только для событий, которые всплывают (где event.bubbles == true)

Визуализацию этого потока событий можно найти на сайте https://domevents.dev

Остановка событий

Пока событие проходит через прослушиватели событий, его можно остановить с помощью event.stopPropagation()илиevent.stopImmediatePropagation()

Когда событие остановлено, оно больше не будет перемещаться по пути события. Остановка события не отменяет его.

Устаревшие механизмы остановки события

Отмена мероприятий

Событие cancelableможно отменить, вызвав event.preventDefault(). Отмена события отменит поведение браузера по умолчанию для этого события. При отмене события event.defaultPreventedсвойство будет установлено в true. Отмена события не остановит перемещение события по пути события.

Объект события

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

Модели обработки событий

Уровень DOM 0

Эта модель обработки событий была представлена ​​Netscape Navigator и остается наиболее кроссбраузерной моделью по состоянию на 2005 год . [ необходима ссылка ] Существует два типа моделей: встроенная модель и традиционная модель.

Встроенная модель

В встроенной модели [20] обработчики событий добавляются как атрибуты элементов. В примере ниже после щелчка по гиперссылке появляется диалоговое окно с сообщением "Hey Joe" . Действие щелчка по умолчанию отменяется путем возврата false в обработчике событий.

<!doctype html> < html  lang = "en" > < head > < meta  charset = "utf-8" > < title > Встроенная обработка событий </ title > </ head > < body >< h1 > Встроенная обработка событий </ h1 >< p > Привет, < a  href = "http://www.example.com"  onclick = "triggerAlert('Джо'); return false;" > Джо </ a > ! </ p ><script> function triggerAlert ( name ) { window.alert ( " Привет " + name ) ; } </script> </body> </html>​​​​​​​

Одно из распространенных заблуждений [ требуется цитата ] относительно встроенной модели заключается в том, что она позволяет регистрировать обработчики событий с пользовательскими аргументами, например, nameв triggerAlertфункции. Хотя может показаться, что в приведенном выше примере это так, на самом деле происходит следующее: движок JavaScript браузера создает анонимную функцию, содержащую операторы в onclickатрибуте. onclickОбработчик элемента будет привязан к следующей анонимной функции:

функция () { triggerAlert ( 'Джо' ); вернуть false ; }

Это ограничение модели событий JavaScript обычно преодолевается путем назначения атрибутов объекту функции обработчика событий или с помощью замыканий .

Традиционная модель

В традиционной модели [21] обработчики событий могут быть добавлены или удалены скриптами. Как и в модели inline, каждое событие может иметь только один зарегистрированный обработчик событий. Событие добавляется путем назначения имени обработчика свойству event объекта элемента. Чтобы удалить обработчик событий, просто установите свойство в null:

<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > Традиционная обработка событий </ title > </ head >  < body > < h1 > Традиционная обработка событий </ h1 >< p > Привет, Джо! </ p ><script> var triggerAlert = function ( ) { window.alert ( "Hey Joe" ); } ; // Назначаем обработчик событий document.onclick = triggerAlert ; // Назначаем другой обработчик событий window.onload = triggerAlert ; // Удаляем обработчик событий, который был только что назначен window.onload = null ; </script> </body> </html>

Чтобы добавить параметры:

var name = 'Джо' ; document . onclick = ( function ( name ) { return function () { alert ( 'Привет ' + name + '!' ); }; }( name ));

Внутренние функции сохраняют свою область действия .

Уровень DOM 2

W3C разработала более гибкую модель обработки событий в DOM Level 2. [18]

Некоторые полезные вещи, которые нужно знать:

Главное отличие от традиционной модели заключается в том, что для одного и того же события можно зарегистрировать несколько обработчиков событий. Опцию useCaptureтакже можно использовать для указания того, что обработчик должен вызываться в фазе захвата, а не в фазе всплытия. Эту модель поддерживают Mozilla , Opera , Safari , Chrome и Konqueror .

Переписанный пример, используемый в традиционной модели

<!doctype html> < html  lang = "en" > < head >  < meta  charset = "utf-8" >  < title > Уровень DOM 2 </ title > </ head >< body >  < h1 > Уровень DOM 2 </ h1 >  < p > Привет, Джо! </ p >   <script> var heyJoe = function () { window.alert ( " Hey Joe !" ) ; } // Добавляем обработчик событий document.addEventListener ( " click" , heyJoe , true ) ; // Фаза захвата // Добавляем еще один обработчик событий window.addEventListener ( "load" , heyJoe , false ); // Фаза всплытия // Удаляем только что добавленный обработчик событий window.removeEventListener ( " load " , heyJoe , false ) ; </script>                                </ тело > </ html >

Специфическая модель Internet Explorer

Microsoft Internet Explorer до версии 8 не следует модели W3C, поскольку его собственная модель была создана до ратификации стандарта W3C. Internet Explorer 9 следует событиям DOM уровня 3, [22] а Internet Explorer 11 удаляет свою поддержку модели, специфичной для Microsoft. [23]

Некоторые полезные вещи, которые нужно знать:

Опять же, эта модель отличается от традиционной тем, что для одного и того же события можно зарегистрировать несколько обработчиков событий. Однако эта useCaptureопция не может использоваться для указания того, что обработчик должен быть вызван на этапе захвата. Эта модель поддерживается браузерами на базе Microsoft Internet Explorer и Trident (например, Maxthon , Avant Browser).

Переписанный пример, использовавшийся в старой модели, специфичной для Internet Explorer.

<!doctype html> < html  lang = "en" > < head >  < meta  charset = "utf-8" >  < title > Специфическая для Internet Explorer модель </ title > </ head > < body >  < h1 > Специфическая для Internet Explorer модель </ h1 > < p > Привет, Джо! </ p > <script> var heyJoe = function () { window.alert ( " Hey Joe!" ) ; } // Добавляем обработчик событий document.attachEvent ( " onclick" , heyJoe ) ; // Добавляем еще один обработчик событий window.attachEvent ( " onload" , heyJoe ); // Удаляем только что добавленный обработчик событий window.detachedEvent ( "onload" , heyJoe ) ; </script>                     </ тело > </ html >

Ссылки

  1. ^ "DOM Standard". dom.spec.whatwg.org . Получено 2021-05-25 .
  2. ^ "JavaScript DOM Events". www.w3schools.com . Получено 2019-08-03 .
  3. ^ «7.8 Перетаскивание — HTML5».
  4. ^ "HTML Drag and Drop API". 28 марта 2024 г.
  5. ^ «Прогрессивные события».
  6. ^ «API файлов».
  7. ^ "Элемент: событие Mousemove - веб-API | MDN". 22 декабря 2023 г.
  8. ^ "Спецификация событий объектной модели документа (DOM) уровня 3 (рабочий черновик)". W3C . Получено 17 апреля 2013 г.
  9. ^ abc "Touch Events version 2 - W3C Editor's Draft". W3C. 14 ноября 2011 г. Получено 10 декабря 2011 г.
  10. ^ «Apple снова использует патенты для подрыва открытых стандартов». opera.com. 9 декабря 2011 г. Получено 9 декабря 2011 г.
  11. ^ «События указателя».
  12. ^ «IndieUI: События 1.0».
  13. ^ «Стандарт HTML».
  14. ^ [1] Архивировано 11 июня 2010 г. на Wayback Machine.
  15. ^ «Какие браузеры поддерживают собственное событие DOMContentLoaded? «Советы по разработке Perfection Labs». 29 июня 2011 г. Архивировано из оригинала 29 июня 2011 г.{{cite web}}: CS1 maint: бот: исходный статус URL неизвестен ( ссылка )
  16. ^ "Test Drive Redirect". Архивировано из оригинала 2010-05-08 . Получено 2010-05-06 .
  17. ^ "Введение в события". Quirksmode.org . Получено 15 сентября 2012 г. .
  18. ^ ab "Спецификация событий объектной модели документа (DOM) уровня 2". W3C . 13 ноября 2000 г. Получено 15 сентября 2012 г.
  19. ^ "Спецификация событий объектной модели документа (DOM) уровня 3 (рабочий черновик)". W3C . Получено 17 апреля 2013 г.
  20. ^ "Ранние обработчики событий". Quirksmode.org . Получено 15 сентября 2012 г. .
  21. ^ "Традиционная модель регистрации событий". Quirksmode.org . Получено 15 сентября 2012 г. .
  22. ^ "Поддержка событий DOM уровня 3 в IE9". Microsoft . 26 марта 2010 г. Получено 28.03.2010 .
  23. ^ "Изменения совместимости в IE11 Preview". Microsoft . 9 сентября 2013 г. Получено 2013-10-05 .

Дальнейшее чтение

Внешние ссылки