События DOM

Эта статья поднимает множество проблем. Пожалуйста, помогите улучшить его или обсудите эти проблемы на странице обсуждения . ( Узнайте, как и когда удалить эти сообщения-шаблоны ) Эта статья написана как руководство или путеводитель . Пожалуйста, помогите переписать эту статью с описательной, нейтральной точки зрения и удалить совет или инструкцию. ( Июль 2018 г. ) ( Узнайте, как и когда удалить этот шаблон сообщения ) Эта статья может быть слишком технической, чтобы ее могло понять большинство читателей . Пожалуйста, помогите улучшить его, чтобы он был понятен неспециалистам , не удаляя технические детали. ( Июль 2018 г. ) ( Узнайте, как и когда удалить этот шаблон сообщения ) ( Узнайте, как и когда удалить этот шаблон сообщения )

События DOM (объектной модели документа) - это действия, которые происходят в результате действия пользователя или в результате изменения состояния элементов дерева DOM . Языки сценариев на стороне клиента, такие как JavaScript , JScript , ECMAScript , VBScript и Java, могут регистрировать различные обработчики событий или прослушиватели на узлах элементов внутри дерева DOM , например, в документах HTML , XHTML , XUL и SVG .

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

• Когда пользователь щелкает мышью
• Когда веб-страница загрузилась
• Когда изображение загружено
• Когда мышь перемещается по элементу
• Когда поле ввода изменено
• Когда отправляется HTML-форма
• Когда пользователь нажимает клавишу ^[1]

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

События [ править ]

HTML-события [ править ]

Общие события [ править ]

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

• События мыши . ^{[2] [3]}
• События клавиатуры .
• HTML-фрейм / объектные события.
• События HTML-формы.
• События пользовательского интерфейса.
• События мутации (уведомление о любых изменениях в структуре документа).
• События выполнения ^[4] (используется XMLHttpRequest , File API, ^[5] ).

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

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

События касания [ редактировать ]

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

В W3C проекте рекомендации, A TouchEventпоставляет TouchListна Touchместах, то модификатор ключей , которые были активны, A TouchListиз Touchместоположений в целевом элементе DOM, а также TouchListиз Touchмест , которые были изменены с момента предыдущего TouchEvent. ^[8]

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

Указатели событий ^[10] [ править ]

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

События инди-интерфейса ^[11] [ править ]

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

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

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

• Control + Z в Windows и Linux.
• Command + Z в Mac OS X.
• События встряхивания на некоторых мобильных устройствах.

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

События, относящиеся к Internet Explorer [ править ]

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

• События буфера обмена .
• События привязки данных. ^{[ требуется разъяснение ]}

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

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

События XUL [ править ]

Помимо обычных (W3C) событий, Mozilla определила набор событий, которые работают только с элементами XUL . ^{[ необходима цитата ]}

Другие события [ править ]

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

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

Поток событий [ править ]

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

• Запускайте элементы от внешнего к внутреннему (захват события). Эта модель реализована в Netscape Navigator .
• Запускайте элементы от внутреннего к внешнему ( всплытие событий ). Эта модель реализована в Internet Explorer и других браузерах. ^[16]

W3C занимает в этой борьбе среднюю позицию. ^{[17] : §1.2} События сначала захватываются, пока не достигнут целевой элемент, а затем всплывают. Во время потока событий на событие можно ответить в любом элементе пути (наблюдатель) в любой фазе, вызвав действие и / или остановив событие (с помощью метода event.stopPropagation () для браузеров, соответствующих W3C и command event.cancelBubble = true для Internet Explorer) и / или путем отмены действия по умолчанию для события.

Объект события [ править ]

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

Модели обработки событий [ править ]

DOM Level 0 [ править ]

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

Встроенная модель [ править ]

Во встроенной модели ^[19] обработчики событий добавляются как атрибуты элементов. В приведенном ниже примере диалоговое окно с предупреждением с сообщением «Привет, Джо» появляется после щелчка по гиперссылке . Действие щелчка по умолчанию отменяется путем возврата 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 ('Joe'); return false;" > Джо </ a > ! </ p >< скрипт > function  triggerAlert ( name )  { window . alert ( «Привет»  +  имя ); } </ script > </ body > </ html >

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

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

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

Традиционная модель [ править ]

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

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

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

var  name  =  'Джо' ; документ . onclick  =  ( функция  ( имя )  { функция возврата  () { предупреждение ( 'Эй' + имя + '!' ); }; } ( имя ));      

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

DOM Level 2 [ править ]

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

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

• Чтобы предотвратить восходящую цепочку события, разработчики должны вызвать stopPropagation()метод объекта события.
• Чтобы предотвратить действие по умолчанию для вызываемого события, разработчики должны вызвать preventDefault()метод объекта события.

Основное отличие от традиционной модели состоит в том, что для одного и того же события можно зарегистрировать несколько обработчиков событий. Этот 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 >   < скрипт >  var  heyJoe  =  function  ()  {  window . alert ( «Привет, Джо!» );  }  // Добавляем  документ обработчика событий . addEventListener (  «щелкнуть» ,  привет ,  Джо , правда  );  // фаза захвата  // Добавляем еще одно  окно обработчика событий . addEventListener (  "загрузка" ,  эй ,  Джо , ложь  );  // фаза пузыря  // Удаляем обработчик событий только что добавленного  окна . removeEventListener (  "загрузка" ,  эйДжо ,  ложь  );  </ скрипт ></ body > </ html >

Модель для Internet Explorer [ править ]

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

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

• Чтобы предотвратить восходящую цепочку событий, разработчики должны установить cancelBubbleсвойство события .
• Чтобы предотвратить действие по умолчанию для вызываемого события, разработчики должны установить returnValueсвойство события .
• thisКлючевое слово относится к глобальному windowобъекту.

Опять же, эта модель отличается от традиционной модели тем, что для одного и того же события можно зарегистрировать несколько обработчиков событий. Однако эту 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 > < скрипт >  var  heyJoe  =  function  ()  {  window . alert ( «Привет, Джо!» );  }  // Добавляем  документ обработчика событий . attachEvent ( "щелчок" ,  привет , Джо );  // Добавляем еще одно  окно обработчика событий . attachEvent ( "загрузить" ,  эй , Джо );  // Удаляем обработчик событий только что добавленного  окна . detachEvent ( "загрузить" ,  эй , Джо );  </ скрипт ></ body > </ html >

Ссылки [ править ]

• Дейтель, Харви. (2002). Интернет и всемирная паутина: как программировать (второе издание). ISBN  0-13-030897-8
• Организация Mozilla. (2009). Справочник по событиям DOM . Проверено 25 августа 2009 года.
• Quirksmode (2008). Таблицы совместимости событий . Проверено 27 ноября 2008 года.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Внешние ссылки [ править ]

• Спецификация событий уровня 2 объектной модели документа (DOM)
• Документ объектной модели (DOM), уровень 3, рабочий проект событий
• ДОМ4: События (черновик редакции)
• Рабочий проект событий пользовательского интерфейса
• Pointer Events Кандидат в рекомендации W3C
• MSDN PointerEvent
• Скрипка JS для всплытия и захвата событий

Ссылки [ править ]