Документ в процессе разработки!

Глава 4.12. Обработка событий в Internet Explorer

4.12.1. Общее описание

4.12.1.1. Основные различия между DOM и Internet Explorer

В этой главе мы описываем модель обработки событий, принятую в Internet Explorer (далее IE). Она отличается от модели обработки событий в DOM, поэтому начнем с краткого обзора различий между этими двумя моделями.

  1. Просачивание событий и отмена типовой обработки события в IE имеют тот же смысл, что в DOM, но реализованы другими свойствами и методами. Механизм перехвата событий реализован только для событий, генерируемых мышью (см. setCapture и releaseCapture).
  2. Интерфейс EventTarget узлами документа в IE не поддерживается. Вместо него есть нестандартные методы attachEvent, detachEvent и fireEvent.
  3. В IE поддерживается нестандартный синтаксис создания обработчиков событий с помощью атрибутов for и event в теге SCRIPT, описанный ниже.
  4. Если в DOM объект event передается обработчику события как аргумент вызова (и, соответственно, недоступен вне тела этого обработчика), то в IE объект event является свойством объекта window, которое инициализируется всякий раз, когда генерируется событие. Поэтому этот объект является глобальным и указывать его в списке аргументов обработчика событий не обязательно. Кроме того, объекты event в DOM и IE различны по набору своих свойств и методов (см. п. 4.12.3).
  5. Набор событий, генерируемых в IE, отличается от набора, предусмотренного в DOM (см. п. 4.12.4).

Теперь рассмотрим перечисленные различия подробно.

4.12.1.2. Жизненный цикл события

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

  • Выполняется действие пользователя или иное условие, порождающее событие.
  • Создается объект window.event, в который заносятся свойства сгенерированного события.
  • Объектная модель документа оповещается о том, что произошло новое событие. Для этого вызывается обработчик данного события того элемента дерева документа, в котором это событие произошло.
  • Обработчик выполняет указанные в нем действия и завершает работу. После этого событие просачивается в обработчик событий его отца в дереве документа и т. д. до тех пор, пока не будет достигнут объект window или пока какой-нибудь из обработчиков в этой цепочке не прервет просачивание.
  • Если событие имеет типовую обработку и она не была отменена предшествующими обработчиками, то выполняется типовая обработка события.

4.12.1.3. Статическое создание обработчиков событий

IE предусматривает два статических способа создания обработчиков событий. Во-первых, мы можем использовать стандартный синтаксис HTML 4.0 с использованием атрибутов on…, например:

<IMG src="sample.gif" onclick="mouseClick()">

В атрибуте on… мы можем указать любое выражение JavaScript, например:

<BUTTON onclick="javascript: alert('Молодец!')">Нажми меня</BUTTON>

Во-вторых, IE поддерживает расширенный синтаксис элемента SCRIPT с использованием следующих нестандартных атрибутов:

Атрибуты:  event = CDATA (тип событий)
           for = IDREF (идентификатор элемента)

Здесь атрибут for задает идентификатор HTML-элемента, к которому будет присоединен данный обработчик, а атрибут event задает тип событий, которые он должен обрабатывать. В следующем примере создается обработчик щелчка мыши на графическом образе с идентификатором myImage:

<SCRIPT for="myImage" event="onclick">
  . . .
</SCRIPT>
  . . .
<IMG id="myImage" src="sample.gif">

Различие между этими способами создания обработчиков событий состоит в моменте их активизации в процессе загрузки документа. Обработчик событий, созданный первым способом, начинает обрабатывать возникающие события, как только будет создан элемент, в котором он описан атрибутом on…; обработчик событий, созданный вторым способом, начинает работать только после загрузки всего документа. Поскольку в процессе загрузки документа могут генерироваться различные события, такая схема предоставляет нам большую гибкость, чем стандартная модель DOM.

4.12.1.4. Динамическое создание обработчиков событий

Для динамического создания обработчиков событий также есть два способа. Во-первых, мы можем присоединить обработчик события к элементу через его DOM-атрибут on…, например:

<IMG id="myImage" src="sample.gif">
  . . .
<SCRIPT>
  document.getElementById("myImage").onclick = "mouseClick()";
</SCRIPT>

Во-вторых, мы можем подключить обработку событий вызовом нестандартного метода attachEvent.

4.12.1.5. Область действия обработчиков событий

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

  1. Элемент, генерирующий события, расположен вне формы. В этом случае его обработчик событий также должен располагаться вне формы; в противном случае он игнорируется.
  2. Элемент, генерирующий события, расположен внутри формы. Если он имеет уникальный для всего документа идентификатор, то его обработчик событий может располагаться в любом месте документа. В противном случае он должен располагаться внутри той же формы.

4.12.2. Дополнительные методы интерфейса HTMLElement

Вместо стандартного интерфейса EventTarget элементы HTML в IE имеют следующие нестандартные методы:

Нестандартные методы интерфейса HTMLElement
Метод Описание
attachEvent Регистрирует обработчик событий заданного типа.
detachEvent Удаляет заданный обработчик событий заданного типа.
fireEvent Генерирует заданное событие.
releaseCapture Отключает перехват событий мыши.
setCapture Включает перехват событий мыши.

Метод attachEvent

Синтаксис:  элемент.attachEvent(type, function)
Аргументы:  type — выражение типа DOMString
            function — указатель на функцию
Результат:  логическое значение

Метод attachEvent регистрирует новый обработчик function события type для данного элемента. Он возвращает true, если регистрация прошла успешно, и false в противном случае. Если новый обработчик регистрируется во время обработки события, то он будет активизироваться только следующими событиями. Если для события зарегистрированы несколько обработчиков, то они вызваются в произвольном порядке. В следующем примере создается обработчик нажатия клавиши, который сработает только один раз.

<BODY onload="document.getElementById('btn').attachEvent('onclick', hurrah)">
<SCRIPT>
function hurrah() {
  alert('Молодец!');
  event.srcElement.detachEvent('onclick', hurrah);
}
</SCRIPT>
<BUTTON id="btn">Нажми меня</BUTTON>

Метод detachEvent

Синтаксис:  элемент.detachEvent(type, function)
Аргументы:  type — выражение типа DOMString
            function — указатель на функцию

Метод detachEvent дерегистрирует обработчик function события type для данного элемента, который был ранее зарегистрирован методом attachEvent.

Метод fireEvent

Синтаксис:  элемент.fireEvent(type, evt?)
Аргументы:  type — выражение типа DOMString
            evt — выражение типа event
Результат:  логическое значение

Метод fireEvent генерирует событие type для данного элемента. Необязательный аргумент evt должен содержать указатель на объект типа event, содержащий описание генерируемого события. Метод возвращает true, если генерация события прошла успешно, и false в противном случае.

Независимо от содержимого аргумента evt четыре его параметра всегда инициализируются следующими значениями:

cancelBubble false
returnValue true
srcElement элемент, чей метод fireEvent вызван
type тип события, заданный в вызове fireEvent

Пример генерации события (переменная evt здесь на самом деле не нужна и приведена только для того, чтобы показать, как создаются объекты типа event):

<BODY onload="init()">
<SCRIPT>
function init() {
  document.body.attachEvent('onclick', hurrah);
  var evt = document.createEventObject();
  document.body.fireEvent('onclick', evt);
}
function hurrah() { alert('Молодец!'); }
</SCRIPT>

Метод releaseCapture

Синтаксис:  элемент.releaseCapture()

Метод releaseCapture отключает перехват событий мыши, включенный методом setCapture.

Метод setCapture

Синтаксис:  элемент.setCapture(flag?)
Аргументы:  flag — логическое выражение

Метод setCapture включает перехват всех событий, генерируемых мышью. Если его аргумент flag равен true (принято по умолчанию), то данный элемент будет перехватывать все события мыши в пределах всего документа. Если аргумент равен false, то данный элемент будет перехватывать только события мыши от содержащихся внутри него элементов. Включение перехвата событий мыши запрещает выбор текста и перетаскивание (drag-and-drop) в окне обозревателя. Пример:

<BODY onload="document.getElementById('capturer').setCapture()">
<DIV id="capturer" onclick="alert('Молодец!')"></DIV>
<BUTTON>Щелчок на этой кнопке перехватывается элементом DIV.</BUTTON>

4.12.3. События: объект event

Всякий раз, когда генерируется событие, в свойство event объекта window заносятся параметры, описывающие это событие. Кроме того, мы можем создавать свои объекты этого типа вызовом нестандартного метода document.createEventObject(), присваивать их свойствам нужные значения, а затем генерировать события методом fireEvent. Объекты данного типа не имеют методов, но обладают следующими свойствами.

Свойства объектов event
Свойство Изменяемое Описание
altKey Да Состояние клавиши Alt.
altLeft Да Состояние левой клавиши Alt.
bookmarks Нет Коллекция закладок ADO, связанных со строками цели события.
boundElements Нет Коллекция элементов, связанных с набором данных.
button Да Номер кнопки мыши, изменившей состояние.
cancelBubble Да Просачивается ли данное событие.
clientX Да Горизонтальная координата события в клиентской области.
clientY Да Вертикальная координата события в клиентской области.
contentOverflow Нет Признак переполнения содержания документа для события onlayoutcomplete.
ctrlKey Да Состояние клавиши Ctrl.
ctrlLeft Да Состояние левой клавиши Ctrl.
dataFld Да Столбец данных для события oncellchange.
dataTransfer Нет Объект, управляющий перетаскиванием данных.
fromElement Да Элемент, который курсор мыши покинул, для событий onmouseover и onmouseout.
keyCode Да Виртуальный код клавиши.
nextPage Нет Позиция следующей страницы в шаблоне печати.
offsetX Да Горизонтальная позиция курсора мыши относительно цели события.
offsetY Да Вертикальная позиция курсора мыши относительно цели события.
propertyName Да Имя изменившегося свойства цели события для события onpropertychange.
qualifier Да Имя элемента данных в источнике данных.
reason Да Результат обмена данными с источником данных.
recordset Да Указатель на текущую набор записей источника данных.
repeat Да Признак нажатия клавиши для события onkeydown.
returnValue Да Код завершения обработчика событий.
screenX Да Горизонтальная координата курсора мыши на экране.
screenY Да Вертикальная координата курсора мыши на экране.
shiftKey Да Состояние клавиши Shift.
shiftLeft Да Состояние левой клавиши Shift.
srcElement Да Элемент, являющийся целью события.
srcFilter Да Фильтр, вызвавший событие onfilterchange.
srcUrn Да Имя реакции, сгенерировашей событие.
toElement Да Элемент, на который курсор мыши попал, для событий onmouseover и onmouseout.
type Да Имя события.
x Да Горизонтальная позиция курсора мыши относительно отца цели события.
y Да Вертикальная позиция курсора мыши относительно отца цели события.

Свойство altKey

Синтаксис:  событие.altKey
Изменяемое: да

Свойство altKey возвращает true, если в момент генерации события была нажата клавиша Alt, и false в противном случае.

Свойство altLeft

Синтаксис:  событие.altLeft
Изменяемое: да

Свойство altKey возвращает true, если в момент генерации события была нажата левая клавиша Alt, и false в противном случае. Это свойство поддерживается только в Windows NT 4.0 и Windows 2000. Если документ не имеет фокуса, то всегда возвращается false.

Свойство bookmarks

Синтаксис:  событие.bookmarks
Изменяемое: нет

Свойство bookmarks возвращает коллекцию закладок ADO, связанных со строками, которые изменяются данным событием. Оно формируется только событиями, связанными с изменением данных.

Свойство boundElements

Синтаксис:  событие.boundElements
Изменяемое: нет

Свойство boundElements возвращает коллекцию всех элементов страницы, связанных с набором данных. Оно формируется только событиями, связанными с изменением данных.

Свойство button

Синтаксис:  событие.button
Изменяемое: нет

Свойство button возвращает номер нажатой кнопки мыши. При этом 0 означает, что ни одна кнопка не нажата, 1 означает левую кнопку, 2 — среднюю кнопку, 4 — правую кнопку. Если нажаты две или три кнопки одновременно, то соответствующие значения суммируются.

Свойство cancelBubble

Синтаксис:  событие.cancelBubble
Изменяемое: да

Свойство cancelBubble по умолчанию равно false. Установка его в true прекращает просачивание данного события. Иными словами, обработчик события предка данного элемента в иерархии документа не будет вызван. В следующем примере щелчок мышью на картинке вызовет вывод на экран имени графического файла (в обработчике события элемента BODY). Однако, щелчок при нажатой клавише Shift никаких действий не вызывает, поскольку обработчик события элемента IMG в этом случае запрещает распространение события вверх.

<SCRIPT>
function checkCancel() {
  if (event.shiftKey)
    event.cancelBubble = true;
}
function showSrc() {
  if (event.srcElement.tagName == "IMG")
    alert(event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="sample.gif">

Свойство clientX

Синтаксис:  событие.clientX
Изменяемое: да

Свойство clientX возвращает горизонтальную позицию курсора мыши относительно клиентской области обозревателя в пикселях.

Свойство clientY

Синтаксис:  событие.clientY
Изменяемое: да

Свойство clientY возвращает вертикальную позицию курсора мыши относительно клиентской области обозревателя в пикселях.

Свойство contentOverflow

Синтаксис:  событие.contentOverflow
Изменяемое: да

Это свойство имеет смысл только для события onlayoutcomplete в шаблонах печати. Оно равно false, если все содержимое документа сгенерировано для печати, и true в противном случае.

Свойство ctrlKey

Синтаксис:  событие.ctrlKey
Изменяемое: да

Свойство ctrlKey возвращает true, если в момент генерации события была нажата клавиша Ctrl, и false в противном случае.

Свойство ctrlLeft

Синтаксис:  событие.ctrlLeft
Изменяемое: да

Свойство ctrlKey возвращает true, если в момент генерации события была нажата левая клавиша Ctrl, и false в противном случае. Это свойство поддерживается только в Windows NT 4.0 и Windows 2000. Если документ не имеет фокуса, то всегда возвращается false.

Свойство dataFld

Синтаксис:  событие.dataFld
Изменяемое: да

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

Свойство dataTransfer

Синтаксис:  событие.dataTransfer
Изменяемое: да

Значением этого свойства является объект, который обеспечивает доступ к форматам системного буфера сохранения (clipboard) при операциях перетаскивания (drag-and-drop). Он имеет два свойства, доступных для чтения и записи:

Свойство Описание
dropEffect Тип операции перетаскивания и тип выводимого на экран курсора:
"copy" Копирование.
"link" Связывание.
"move"   Перемещение.
"none" Курсор не задан (по умолчанию)
effectAllowed Указывает, какие операции переноса данных разрешены:
"copy" Копирование.
"link" Связывание.
"move" Перемещение.
"copyLink" Копирование или связывание.
"copyMove" Копирование или перемещение.
"linkMove" Связывание илм перемещение.
"all" Все разрешены.
"none" Все запрещены.
"uninitialized"   Не задано (по умолчанию).

Кроме того, данный объект имеет три метода (см. список форматов буфера сохранения в описании объекта clipboardData):

Метод Описание
clearData(формат?) Удаляет заданный формат из буфера сохранения. Если формат не задан, то удаляются все форматы.
getData(формат) Извлекает данные из буфера сохранения заданного формата, который может иметь значение "Text" или "URL", и возвращает их в виде строки.
setData(формат, данные) Помещает в буфер сохранения строку данные в заданном формате, который может иметь значение "Text" или "URL". Возвращает true в случае успеха и false в противном случае.

Пример перетаскивания объекта с использованием dataTransfer:

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT>
// Сообщаем источнику, что объект нужно передать как URL.
function initDrag() {
  event.dataTransfer.setData("URL", src.href);
}

// Сообщаем приемнику, что объект нужно принять как URL.
function finishDrag() {
  dst.innerText = event.dataTransfer.getData("URL");
}
</SCRIPT>
</HEAD>
<BODY>
<A id=src href="about:текст_ссылки" onclick="return(false)"
   ondragstart="initDrag()">Тестовая ссылка</A>
<P id=dst ondragenter="finishDrag()">Бросьте ссылку сюда</P>
</BODY>
</HTML>

Свойство fromElement

Синтаксис:  событие.fromElement
Изменяемое: да

Это свойство имеет смысл только для событий onmouseover и onmouseout. Его значением является указатель на объект, который покинул курсор мыши в момент генерации события. Следующий пример выводит сообщение при попадании курсора мыши на заданный абзац.

<SCRIPT>
function testMouse(obj) {
  if (!obj.contains(event.fromElement)) alert("Приехали!");
}
</SCRIPT>
<P onmouseover="testMouse(this)">Наведите мышку.</P>

Свойство keyCode

Синтаксис:  событие.keyCode
Изменяемое: да

Это свойство имеет смысл только для событий onkeydown, onkeyup и onkeypress. Его значением является виртуальный код клавиши, нажатие или отпускание которой вызвало данное событие. Для остальных событий это свойство равно нулю.

Свойство nextPage

Синтаксис:  событие.nextPage
Изменяемое: нет

Это свойство имеет смысл только для шаблонов печати. Оно может принимать три значения: "left" (левая страница при двусторонней печати), "right" (правая страница при двусторонней печати) и "" (директива @page не задана).

Свойство offsetX

Синтаксис:  событие.offsetX
Изменяемое: да

Свойство offsetX возвращает горизонтальную позицию курсора мыши относительно цели события в пикселях.

Свойство offsetY

Синтаксис:  событие.offsetY
Изменяемое: да

Свойство offsetY возвращает вертикальную позицию курсора мыши относительно цели события в пикселях.

Свойство propertyName

Синтаксис:  событие.propertyName
Изменяемое: да

Свойство propertyName имеет смысл только для события onpropertychange. В этом случае оно содержит имя свойства, изменение которого породило данное событие. Пример:

<INPUT type="button" id="btn"
  value="Щелкните, чтобы изменить свойство VALUE этой кнопки."
  onclick='btn.value = "Новое значение VALUE этой кнопки."'
  onpropertychange='alert("Значение свойства " + event.propertyName + " изменено.")'>

Свойство qualifier

Синтаксис:  событие.qualifier
Изменяемое: да

Свойство qualifier возвращает имя элемента данных в источнике данных, указанное в атрибуте datasrc элемента, связанного с источником данных. Оно формируется только событиями, связанными с передачей данных.

Свойство reason

Синтаксис:  событие.reason
Изменяемое: да

Свойство reason возвращает код результата обмена даными с источником данных: 0 - обмен завершился успешно, 1 - обмен был прерван, 2 - обмен завершился из-за ошибки. Оно формируется только событиями, связанными с передачей данных.

Свойство recordset

Синтаксис:  событие.recordset
Изменяемое: да

Свойство recordset задает или возвращает объект, который является текущим набором записей в источнике данных. Оно формируется только событиями, связанными с передачей данных.

Свойство repeat

Синтаксис:  событие.repeat
Изменяемое: да

Это свойство имеет смысл только для события onkeydown. Оно равно true до тех пор, пока пользователь держит клавишу нажатой, и сбрасывается в false при отпускании клавиши.

Свойство returnValue

Синтаксис:  событие.returnValue
Изменяемое: да

Свойство returnValue по умолчанию равно true. Сброс его в false запрещает типовую обработку данного события, принятую по умолчанию. В следующем примере щелчок мыши на ссылке выводит адрес этой ссылки вместо перехода по ней (действие, принятое по умолчанию).

<SCRIPT>
function showLink() {
  if (event.srcElement.tagName == "A") {
    event.returnValue = false;
    alert(event.srcElement.href);
  }
}
</SCRIPT>
<A onclick="showLink()" href="http://wdh.suncloud.ru/">WDH</A>

Свойство screenX

Синтаксис:  событие.screenX
Изменяемое: да

Свойство screenX возвращает горизонтальную позицию курсора мыши относительно экрана.

Свойство screenY

Синтаксис:  событие.screenY
Изменяемое: да

Свойство screenY возвращает вертикальную позицию курсора мыши относительно экрана.

Свойство shiftKey

Синтаксис:  событие.shiftKey
Изменяемое: да

Свойство shiftKey возвращает true, если в момент генерации события была нажата клавиша Shift, и false в противном случае.

Свойство shiftLeft

Синтаксис:  событие.shiftLeft
Изменяемое: да

Свойство shiftKey возвращает true, если в момент генерации события была нажата левая клавиша Shift, и false в противном случае. Это свойство поддерживается только в Windows NT 4.0 и Windows 2000. Если документ не имеет фокуса, то всегда возвращается false.

Свойство srcElement

Синтаксис:  событие.srcElement
Изменяемое: да

Свойство srcElement возвращает или задает цель события, т. е. указатель на элемент, сгенерировавший данное событие. В следующем примере щелчок мыши на любом элементе приведет к выводу на экран имени тега этого элемента:

<BODY onclick="alert(event.srcElement.tagName)">
  . . .
</BODY>

Свойство srcFilter

Синтаксис:  событие.srcFilter
Изменяемое: да

Свойство srcFilter возвращает или задает указатель на фильтр, сгенерировавший данное событие. Оно имеет смысл только для события onfilterchange.

Свойство srcUrn

Синтаксис:  событие.srcUrn
Изменяемое: да

Свойство srcUrn возвращает или задает имя ресурса (URN) для реакции (behavior), сгенерировавший данное событие. Оно не равно null только в том случае, когда цель события имеет присоединенную реакцию, эта реакция имеет URN и именно она породила данное событие.

Свойство toElement

Синтаксис:  событие.toElement
Изменяемое: да

Это свойство имеет смысл только для событий onmouseover и onmouseout. Его значением является указатель на объект, на который попал курсор мыши в момент генерации события. Следующий пример выводит сообщение при попадании курсора мыши на заданный абзац.

<SCRIPT>
function testMouse(obj) {
  if (obj.contains(event.toElement)) alert("Приехали!");
}
</SCRIPT>
<P onmouseover="testMouse(this)">Наведите мышку.</P>

Свойство type

Синтаксис:  событие.type
Изменяемое: да

Свойство type возвращает или задает тип данного события. Тип события — это имя события без префикса on, например для события onclick эта строка равна "click".

Свойство x

Синтаксис:  событие.x
Изменяемое: да

Свойство x возвращает горизонтальную позицию курсора мыши относительно отца цели события в пикселях. Если мышь находилась за пределами окна в момент генерации события, то это свойство равно -1. Если цель события абсолютно позиционирована и не является потомком абсолютно позиционированного элемента или событие сгенерировано мышью, то возвращается позиция курсора мыши относительно элемента BODY.

Свойство y

Синтаксис:  событие.y
Изменяемое: да

Свойство y возвращает вертикальную позицию курсора мыши относительно отца цели события в пикселях. Если мышь находилась за пределами окна в момент генерации события, то это свойство равно -1. Если цель события абсолютно позиционирована и не является потомком абсолютно позиционированного элемента или событие сгенерировано мышью, то возвращается позиция курсора мыши относительно элемента BODY.

4.12.4. Классификация событий

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

4.12.4.1. События пользовательского интерфейса

activate
Это событие генерируется, когда элемент становится активным, т. е. получает фокус.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
beforedeactivate
Это событие генерируется перед тем, как элемент перестанет быть активным, т. е. потеряет фокус.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
beforeeditfocus
Это событие генерируется перед началом редактирования элемента. Оно возможно только для тех элементов, которые могут иметь нестандартный атрибут contentEditable, равный "true".
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: переводит объект в режим редактирования;
  • контекст: нет.
controlselect
Это событие генерируется перед тем как будет выбран элемент, допускающий изменение размеров. Оно возможно только для тех элементов, которые могут иметь нестандартный атрибут contentEditable, равный "true".
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: появляются стрелки изменения размеров объекта;
  • контекст: нет.
deactivate
Это событие генерируется, когда элемент перестает быть активным, т. е. теряет фокус.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
resizeend
Это событие происходит при завершении изменения размеров объекта.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
resizestart
Это событие происходит при начале изменения размеров объекта.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.

4.12.4.2. События мыши

click
Это событие генерируется при щелчке левой кнопкой мыши на элементе.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: зависит от цели события;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button.
contextmenu
Это событие генерируется при щелчке правой кнопкой мыши в клиентской области экрана.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: выводит на экран контекстно-зависимое меню;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button.
dblclick
Это событие генерируется при двойном щелчке левой кнопкой мыши на элементе.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: зависит от цели события;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button.
mousedown
Это событие генерируется при нажатии кнопки мыши на элементе.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button.
mouseenter
Это событие генерируется при попадании курсора мыши на элемент.
  • bubbles: false;
  • cancelable: false;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button, fromElement, toElement.
mouseleave
Это событие генерируется при покидании курсором мыши элемента.
  • bubbles: false;
  • cancelable: false;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button, fromElement, toElement.
mousemove
Это событие генерируется при движении курсора мыши по элементу.
  • bubbles: true;
  • cancelable: false;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button.
mouseout
Это событие генерируется при покидании курсором мыши элемента.
  • bubbles: true;
  • cancelable: false;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button, fromElement, toElement.
mouseover
Это событие генерируется при попадании курсора мыши на элемент.
  • bubbles: true;
  • cancelable: false;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button, fromElement, toElement.
mouseup
Это событие генерируется при отпускании кнопки мыши на элементе.
  • bubbles: true;
  • cancelable: true;
  • контекст: screenX, screenY, clientX, clientY, offsetX, offsetY, x, y, altKey, ctrlKey, shiftKey, button.

4.12.4.3. События клавиатуры

help
Генерируется при нажатии клавиши F1.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: вызывается справка обозревателя;
  • контекст: altKey, ctrlKey, shiftKey.
keydown
Генерируется при нажатии клавиши.
  • bubbles: true;
  • cancelable: true;
  • контекст: altKey, ctrlKey, shiftKey, keyCode, repeat.
keypress
Генерируется при удержании нажатой клавиши.
  • bubbles: true;
  • cancelable: true;
  • контекст: altKey, ctrlKey, shiftKey, keyCode.
keyup
Генерируется при отпускании клавиши.
  • bubbles: true;
  • cancelable: true;
  • контекст: altKey, ctrlKey, shiftKey, keyCode.

4.12.4.4. События изменения документа

filterchange
Это событие генерируется, когда визуальный фильтр изменяет состояние или заканчивает заданное преобразование.
  • bubbles: false;
  • cancelable: false;
  • контекст: srcFilter.
losecapture
Это событие генерируется, когда элемент прекращает перехват событий мыши.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
propertychange
Это событие генерируется, когда изменяется атрибут или свойство CSS элемента.
  • bubbles: false;
  • cancelable: false;
  • контекст: propertyName.
readystatechange
Это событие генерируется при изменении состояния готовности элемента. Новое состояние готовности хранится в свойстве элемента readyState, принимающем значения "uninitialized" (объект неинициализирован), "loading" (идет загрузка объекта), "loaded" (объект загрузил свои данные), "interactive" (объект готов к взаимодействию с пользователем) и "complete" (объект полностью инициализирован).
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.

4.12.4.5. События HTML

abort
Это событие происходит, если загрузка страницы была прервана до завершения загрузки графического образа.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
beforeunload
Это событие генерируется перед началом выгрузки документа.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
blur
Это событие происходит, когда элемент теряет фокус.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
change
Это событие происходит в момент потери элементом фокуса, если его значение изменилось.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
error
Это событие происходит, если произошла ошибка при загрузке графического файла, объекта, таблицы стилей или при выполнении сценария.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
focus
Это событие происходит, когда элемент получает фокус.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
load
Это событие генерируется по завершении загрузки графического файла, объекта, фрейма, сценария или всего документа.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
reset
Это событие происходит при инициализации формы. Оно применимо только к элементу FORM.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
resize
Это событие происходит при изменении размеров объекта.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
scroll
Это событие происходит при прокрутке окна обозревателя.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
select
Это событие происходит, когда пользователь выделяет что-либо на экране обозревателя.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
stop
Это событие происходит, когда пользователь нажимает кнопку Stop или покидает Веб-страницу.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
submit
Это событие происходит при пересылке формы. Оно применимо только к элементу FORM.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
unload
Это событие генерируется перед выгрузкой документа из окна или фрейма.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.

4.12.4.6. События элемента MARQUEE

Internet Explorer поддерживает нестандартный элемент MARQUEE (бегущая строка текста). С этим элементом связаны три события, которые могут генерироваться только им.

bounce
Это событие генерируется, если бегущая строка достигла края экрана и ей задан атрибут behavior = "alternate" (бежать в обратную сторону).
  • bubbles: false;
  • cancelable: true;
  • по умолчанию: строка начинает бежать в обратную сторону;
  • контекст: нет.
finish
Это событие генерируется при завершении цикла вывода бегущей строки.
  • bubbles: false;
  • cancelable: true;
  • по умолчанию: вывод бегущей строки заканчивается;
  • контекст: нет.
start
Это событие генерируется перед началом каждого цикла вывода бегущей строки.
  • bubbles: false;
  • cancelable: false;
  • по умолчанию: начинается новый цикл вывода бегущей строки;
  • контекст: нет.

4.12.4.7. События буфера сохранения

Перечисленные ниже события генерируются при обмене данными между документом и системным буфером сохранения. Пример работы с буфером сохранения см. в описании объекта window.clipboardData.

beforecopy
Это событие генерируется источником данным перед копированием выбранного фрагмента в системный буфер сохранения.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
beforecut
Это событие генерируется источником данным перед вырезкой выбранного фрагмента в системный буфер сохранения.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
beforepaste
Это событие генерируется приемником данным перед вставкой в него содержимого системного буфера сохранения.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
copy
Это событие генерируется источником данным при копировании выбранного фрагмента в системный буфер сохранения.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: копирует выбранный фрагмент;
  • контекст: нет.
cut
Это событие генерируется источником данным при вырезке выбранного фрагмента в системный буфер сохранения.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: вырезает выбранный фрагмент;
  • контекст: нет.
paste
Это событие генерируется приемником данным при вставке в него содержимого системного буфера сохранения.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: вставляет выбранный фрагмент;
  • контекст: нет.
selectionchange
Это событие генерируется при любом изменении объекта document.selection, т. е. выбранного фрагмента документа.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
selectstart
Это событие генерируется в момент начала выделения фрагмента документа, причем тем объектом, на котором началось выделение.
  • bubbles: true;
  • cancelable: true;
  • по умолчанию: высвечивает выделение фрагмента;
  • контекст: нет.

4.12.4.8. События перетаскивания

Перечисленные ниже события генерируются при перетаскивании (drag-and-drop) объектов.

drag
Это событие непрерывно генерируется объектом в процессе его перетаскивания.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
dragend
Это событие генерируется объектом при завершении его перетаскивания, т. е. в тот момент, когда пользователь отпускает нажатую кнопку мыши. Оно генерируется после событий dragleave, сгенерированного приемником перетаскивания.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
dragenter
Это событие генерируется всякий раз, когда перетаскиваемый объект попадает на такой объект, куда его можно перетащить. При этом источником события является потенциальный приемник перетаскиваемого объекта.

  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
dragleave
Это событие генерируется всякий раз, когда перетаскиваемый объект уходит с объекта, на который его можно перетащить. При этом источником события является потенциальный приемник перетаскиваемого объекта.

  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
dragover
Это событие непрерывно генерируется потенциальным приемником перетаскиваемого объекта в процессе перетаскивания последнего по приемнику.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
dragstart
Это событие генерируется объектом в момент начала его перетаскивания. IE позволяет перетаскивать графические образы и предварительно выбранные текстовые фрагменты.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
drop
Это событие генерируется приемником при завершении перетаскивания на него объекта, т. е. в тот момент, когда пользователь отпускает нажатую кнопку мыши. Оно генерируется перед событиями dragleave и dragend.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.

4.12.4.9. События печати

afterprint
Это событие генерируется окном обозревателя после печати или предварительного просмотра ассоциированного с ним документа. Обычно оно используется в сочетании с событием beforeprint: обработчик beforeprint вносит в документ изменения перед его печатью или просмотром, а обработчик afterprint восстанавливает исходное состояние документа.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
beforeprint
Это событие генерируется окном обозревателя перед началом печати или предварительного просмотра ассоциированного с ним документа.
  • bubbles: false;
  • cancelable: false;
  • контекст: нет.
layoutcomplete
Это событие генерируется при завершении формирования очередной страницы документа для печати.
  • bubbles: true;
  • cancelable: true;
  • контекст: contentOverflow.

4.12.4.10. События передачи данных

Перечисленные ниже события генерируются элементами документа, связанными с внешним источником данных.

afterupdate
Это событие генерируется элементом, связанным с внешним источником данных, после успешного обновления данных в этом источнике.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
beforeupdate
Это событие генерируется элементом, связанным с внешним источником данных, перед обновлением данных в этом источнике.
  • bubbles: true;
  • cancelable: true;
  • контекст: нет.
cellchange
Это событие генерируется при изменении данных во внешнем источнике.
  • bubbles: true;
  • cancelable: false;
  • контекст: dataFld.
dataavailable
Это событие периодически генерируется в процессе асинхронной загрузки данных из внешнего источника.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
datasetchanged
Это событие генерируется при изменении набора данных, представленных внешним источником.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
datasetcomplete
Это событие генерируется по завершении приема данных из внешнего источника.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
errorupdate
Это событие генерируется элементом, связанным с внешним источником данных, при ошибке обновления данных в этом источнике.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
rowenter
Это событие генерируется при изменении текущей строки во внешнем источнике данных в тот момент, когда объект закончил прием новых данных.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
rowexit
Это событие генерируется перед изменении текущей строки объекта внешним источником данных.
  • bubbles: false;
  • cancelable: true;
  • контекст: нет.
rowsdelete
Это событие генерируется перед началом удаления строк из набора данных.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.
rowsinserted
Это событие генерируется сразу после вставки новых строк в набор данных.
  • bubbles: true;
  • cancelable: false;
  • контекст: нет.