События JavaScript.

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

Немного теории…

Тип события — это строка, определяющая тип действия, вызвавшего событие. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа. Поскольку тип события — это просто строка, его иногда называют именем события.

Цель события — это объект, в котором возникло событие или с которым это событие связано. Самыми типичными целями событий в клиентских приложениях на языке JavaScript являются объекты Window, Document и Element, но некоторые типы событий могут происходить и в других типах объектов.

Обработчик события — это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в веб-браузере, указав тип события и цель. Когда в указанном целевом объекте возникнет событие указанного типа, браузер вызывает «обработчик».

Объект события — это объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента (кроме IE8 и более ранних версий, где объект события доступен только в виде глобальной переменной event). Все объекты событий имеют свойство type, определяющее тип события, и свойство target, определяющее цель события.

Распространение события — это процесс, в ходе которого браузер решает, в каких объектах следует вызвать обработчики событий.

Установка свойств обработчиков событий

Самый простой способ зарегистрировать обработчик события заключается в том, чтобы присвоить свойству целевого объекта события желаемую функцию обработчика. По соглашению свойства обработчиков событий имеют имена, состоящие из слова «on», за которым следует имя события: onclick, onchange, onload, onmouseover и т.д. Например:

// Присвоить функцию свойству onload объекта Window.
// Функция - обработчик события: она вызывается, когда документ будет загружен
window.onload = function() { 
	// Отыскать элемент <form>
	var elt = document.getElementById("shipping_address"); 
    
    // Зарегистрировать обработчик события, который будет вызываться 
    // непосредственно перед отправкой формы
    elt.onsubmit = function() { return validate(this); }
}

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

Типы событий

События загрузки документа

Web-приложениям необходимо, чтобы web-браузер извещал их о моменте, когда закончится загрузка документа и он будет готов для выполнения операций над ним. Для этой цели служит событие load в объекте Window. Событие load возбуждается только после того, как документ и все его изображения будут полностью загружены.

События мыши

Все события мыши представлены в виде таблицы:

ТипОписание
clickВысокоуровневое событие, возбуждаемое, когда пользователь нажимает и отпускает кнопку мыши или иным образом активирует элемент.
contextmenuОтменяемое событие, возбуждаемое перед выводом контекстного меню. Текущие браузеры выводят контекстное меню по щелчку правой кнопки мыши, поэтому данное событие можно также использовать как событие click.
dblclickВозбуждается, когда пользователь выполняет двойной щелчок.
mousedownВозбуждается, когда пользователь нажимает кнопку мыши.
mouseupВозбуждается, когда пользователь отпускает кнопку мыши.
mousemoveВозбуждается, когда пользователь перемещает указатель мыши.
mouseoverВозбуждается, когда указатель мыши помещается над элементом. Свойство relatedTarget (или fromElement в IE) определяет элемент, с которого был перемещен указатель мыши.
mouseoutВозбуждается, когда указатель мыши покидает элемент. Свойство relatedTarget (или toElement в IE) определяет элемент, на который был перемещен указатель мыши.
mouseenterПодобно mouseover, но не всплывает. Впервые появилось в IE и было стандартизовано в HTML5, но пока поддерживается не всеми браузерами.
mouseleaveПодобно mouseout, но не всплывает. Впервые появилось в IE и было стандартизовано в HTML5, но пока поддерживается не всеми браузерами.


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

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

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

События keydown и keyup, а также свойство keyCode используются уже более десяти лет, но они так и не были стандартизованы. Проект стандарта DOM Level 3 Events стандартизует типы keydown и keyup событий, но не стандартизует свойство keyCode. Вместо этого он определяет новое свойство key, которое должно содержать название клавиши в виде строки. Если клавиша соответствует печатаемому символу, свойство key должно содержать этот печатаемый символ. Для функциональных клавиш свойство key должно содержать такие значения, как F2, Home или Left.

События ввода текста

Cобытие keypress обозначает что был введен печатаемый символ. Он представляет ввод единственного символа. Этот символ содержится в объекте события в виде числового значения кодового пункта Юникода и, чтобы преобразовать его в строку, необходимо использовать метод String.fromCharCode(). В большинстве браузеров кодовый пункт введенного символа сохраняется в свойстве keyCode объекта события. Однако в Firefox вместо него используется свойство charCode.

В большинстве браузеров событие keypress возбуждается только при вводе печатаемого символа. Его можно отменить, чтобы предотвратить ввод символа. Например, можно предотвратить ввод алфавитных символов в поле, предназначенное для ввода числовых данных.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>. Например, чтобы прикрепить click-событие к input кнопке, можно присвоить обработчик onclick:

<input value="Нажми меня" onclick="alert('Клик!')" type="button">
// При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick.

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>. Пример установки обработчика click:

<input id="elem" type="button" value="Нажми меня" />
<script>
  elem.onclick = function() {
    alert( 'Спасибо' );
  };
</script>

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство onclick.

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором он сработал. Это можно использовать, чтобы получить свойства или изменить элемент. В коде ниже button выводит свое содержимое, используя this.innerHTML:

<button onclick="alert(this.innerHTML)">Нажми меня</button>

Отмена событий

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

В следующем коде демонстрируется обработчик события клика по гиперссылке, который использует все способы отмены события (блокирует переход пользователя по ссылке):

window.onload = function() {	
	// Найти все ссылки
	var a_href = document.getElementsByTagName('a');
	
	// Добавить обработчик события click (не для IE<=8)
	for(var i = 0; i < a_href.length; i++)
		a_href[i].addEventListener('click', function(e) {e.preventDefault()}, false);
};

Отмена действий, по умолчанию связанных с событием, — это лишь одна из разновидностей отмены события. Имеется также возможность остановить распространение события. В браузерах, поддерживающих метод addEventListener(), объект события имеет метод stopPropagation(), вызов которого прерывает дальнейшее распространение события. Если в том же целевом объекте будут зарегистрированы другие обработчики этого события, то остальные обработчики все равно будут вызваны, но никакие другие обработчики событий в других объектах не будут вызваны после вызова метода stopPropagation().

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Chinese (Traditional)EnglishJapaneseRussianUkrainian

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: