События и обработчики событий в JavaScript. События в JavaScript

Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.

Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.

Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:

Пример 1

Код в действии:

В примере при нажатии на ссылку появляется всплывающее окно с сообщением. Дополнительно к действию мы прописали «return false;». Это требуется чтобы предотвратить переход по ссылке после срабатывания события «onclick». В других элементах (где нет аттрибута href) это можно опустить.

Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.

Выносим код события onclick в javascript-функцию

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

function ChangeColor(Element) { if (Element.style.color == "green") Element.style.color = "red"; else Element.style.color = "green"; return false; } Изменить цвет

Код в действии:

Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле - меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

//дожидаемся полной загрузки страницы window.onload = function () { //получаем идентификатор элемента var a = document.getElementById("switch"); //вешаем на него событие a.onclick = function() { //производим какие-то действия if (this.innerHTML=="On") this.innerHTML = "Off"; else this.innerHTML = "On"; //предотвращаем переход по ссылке href return false; } } On

Код в действии:

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы var a = document.querySelectorAll(".link"); //перебираем все найденные элементы и вешаем на них события .forEach.call(a, function(el) { //вешаем событие el.click = function(e) { //производим действия } });

Применяем jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:

$(function(){ $(".link").click(function() { //действия }); });

И ещё один вариант, который идентичен предыдущему.

$(function(){ $(".link").on("click", function(){ //действия }); });

С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.

Да, библиотека Ext Core представляет весьма мощные средства для создания новых элементов Web-страницы. К сожалению, удалить ненужные элементы можно только методомremove объектаElement . Он немедленно удаляет данный элемент Webстраницы со всем его содержимым, не принимает параметров и не возвращает значения.

Ext.get("cmain").remove();

Здесь мы удаляем контейнер cmain со всем его содержимым.

Обработка событий

Теперь самое время рассмотреть один ключевой вопрос Web-программирования: события, их возникновение и обработка.

Понятие события и его обработки

Рассматривая примеры Web-сценариев, мы исходили из предположения, что они выполняются при загрузке Web-страницы. Как мы уже знаем изглавы 14 , Webсценарий исполняется в том месте HTML-кода Web-страницы, в котором присутствует создающий его тег . При этом неважно, является Web-сценарий внутренним (помещенном прямо в HTML-код) или внешним (хранящимся в отдельном файле Web-сценария).

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

Событием в терминологии Web-программирования называется некое условие, которое возникает в Web-обозревателе в ответ на действия посетителя или в процессе работы самого Web-обозревателя. Так, щелчок левой кнопкой мыши на элементе Web-страницы приводит к возникновению события "щелчок левой кнопкой мыши", а перемещение курсора мыши над элементом Web-страницы - "перемещение курсора мыши". Нажатие клавиши на клавиатуре приводит к возникновению события "нажатие клавиши", а ошибка в загрузке изображения - "ошибка загрузки".

Существует много разнообразных событий, как говорится, на все случаи жизни. Ежесекундно их возникает десятки, если не сотни.

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

Что может делать обработчик события? Да что угодно! При наведении курсора мыши он может привязывать к элементу Web-страницы другой стилевой класс, меняя его представление. (Именно такой обработчик события мы создали вглаве 14 .) При щелчке левой кнопкой мыши на элементе Web-страницы - разворачивать или сворачивать блочный контейнер, открывая или скрывая его содержимое. А при из-

менении размеров окна Web-обозревателя - менять размеры блочных контейнеров, чтобы полностью занять ими клиентскую область окна.

Теперь уясним следующие моменты, связанные с обработчиками событий.

 Обработчик события оформляется в виде функции, которая принимает два параметра. Подробнее об этом мы поговорим потом.

 Обработчик события привязывается к конкретному элементу Web-страницы,

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

 Обработчик события привязывается к конкретному событию. Так, если мы привязали обработчик к событию "щелчок левой кнопкой мыши", он будет выполняться только при возникновении именно этого события. Другие события, скажем, "двойной щелчок левой кнопкой мыши", он обрабатывать не будет.

 Обработчик события выполняется только при возникновении заданного события

в элементе Web-страницы, к которому он привязан. Во время загрузки Webстраницы он не выполняется.

 Мы можем привязать один и тот же обработчик сразу к нескольким элементам Web-страницы и нескольким событиям. Так, один и тот же обработчик может обрабатывать событие "щелчок левой кнопкой мыши" в абзаце и в гиперссылке. Кстати, так часто и делают.

События объекта Element

Самые полезные для нас на данный момент события, поддерживаемые объектом Element библиотеки Ext Core, представлены в табл. 15.1. Их довольно много, и некоторые из них поддерживаются только определенными элементами Webстраницы.

	Таблица 15.1. События объектаElement
	Описание
	Возникает при прерывании загрузки изображения, аудиоили видеофайла
	посетителем. Не всплывает. Действие по умолчанию - отмена загрузки,
	отменить его невозможно
	Возникает при щелчке левой кнопкой мыши на элементе Web-страницы
	после событий mousedown иmouseup . Всплывает. Действие по умолчанию
	зависит от конкретного элемента, может быть отменено
	Возникает при двойном щелчке левой кнопкой мыши на элементе Web-
	страницы. Всплывает. Действие по умолчанию зависит от конкретного эле-
	мента, может быть отменено
	Возникает при ошибке при загрузке изображения, аудиоили видеофайла.
	Не всплывает. Действие по умолчанию - вывод сообщения об ошибке,
	отменить его невозможно

		Часть III. Поведение Web-страниц. Web-сценарии
		Таблица 15.1 (окончание)
		Описание
		невозможно
		Возникает при нажатии любой клавиши. Всплывает. Действие по умолча-
		нию - передача нажатой клавиши элементу, имеющему фокус ввода, мо-
		жет быть отменено
		Возникает при нажатии любой алфавитно-цифровой клавиши между собы-
		тиями keydown иkeyup . Если клавиша удерживается нажатой, возникает
		постоянно, пока клавиша не будет отпущена. Всплывает. Действие по умол-
		чанию - передача нажатой клавиши элементу, имеющему фокус ввода,
		может быть отменено
		Возникает при отпускании нажатой ранее клавиши. Всплывает. Действие по
		умолчанию - передача нажатой клавиши элементу, имеющему фокус вво-
		да, может быть отменено
		Возникает после успешной загрузки изображения, аудиоили видеофайла.
		Не всплы
		Возникает при нажатии левой кнопки мыши. Всплывает. Действие по умол-
		чанию отсутствует
		Возникает при перемещении курсора мыши над элементом Web-страницы.
		Всплывает. Действие по умолчанию отсутствует
		Возникает, когда курсор мыши уводится с элемента Web-страницы. Всплы-
		вает. Действие по умолчанию отсутствует
		Возникает, когда курсор мыши наводится на элемент Web-страницы. Всплы-
		вает. Действие по умолчанию отсутствует
		Возникает при отпускании нажатой ранее левой кнопки мыши. Всплывает.
		Действие по умолчанию отсутствует

Не будем пока вдаваться в детали, мы к ним еще вернемся. Сейчас рассмотрим более насущный вопрос.

Привязка и удаление обработчиков событий

Метод on объектаElement выполняет привязку указанной функции к указанному событию данного элемента Web-страницы в качестве обработчика:

.on(, )

Первым параметром методу передается строка с названием события, к которому выполняется привязка обработчика. Названия событий приведены в первом столбце табл. 15.1.

Второй параметр - функция, которая станет обработчиком события. Эта функция должна принимать следующие параметры:

 первый - экземпляр объекта EventObject , представляющий сведения о событии и позволяющий им управлять (мы рассмотрим этот объект потом);

 второй - экземпляр объекта HTMLElement , представляющий элемент Webстраницы, в котором изначально возникло данное событие.

Кроме того, в функцию-обработчик неявно передается еще один параметр - экземпляр объектаHTMLElement , представляющий элемент Web-страницы, в котором в данный момент обрабатывается данное событие, - тот самый элемент, к которому привязан этот обработчик. Событие могло возникнуть в нем изначально, а могло всплыть из дочернего элемента; подробнее об этом будет рассказано в следующем разделе. Данный параметр доступен в теле функции-обработчика через перемен-

ную this .

Ext.get("navbar").on("mouseover", function(e, t) {

Здесь мы привязываем к списку navbar обработчик событияmouseover . Первый параметр методаon определяет название события, которое мы хотим обрабатывать. Второй параметр этого метода содержит объявление функции-обработчика.

В теле функции-обработчика мы обращаемся к переменнойthis , чтобы получить экземпляр объектаHTMLElement , представляющий элемент Web-страницы, чье событие мы обрабатываем. Чтобы получить из него соответствующий экземпляр объектаElement , мы используем методget . После чего привязываем к полученному экземпляру объектаElement стилевой классhovered вызовом методаaddClass .

Отметим, что наша функция-обработчик принимает два параметра, которые, впрочем, нигде в ее теле не используются. Так что мы можем вообще не указывать их в объявлении функции-обработчика:

Ext.get("navbar").on("mouseover", function() {

Ext.get(this).addClass("hovered");

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

function navbarMouseOver() { Ext.get(this).addClass("hovered");

Ext.get("navbar").on("mouseover", navbarMouseOver);

Это полезно, если мы хотим привязать один обработчик сразу к нескольким событиям одного или нескольких элементов Web-страницы.

Метод removeAllListeners объектаElement удаляет все привязанные к данному элементу Web-страницы обработчики событий. Он не принимает параметров.

Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером. Например, событием может быть клик мыши по кнопке, движение мыши, наведение фокуса на элемент, изменение значения в каком-нибудь текстовом поле, изменение размеров окна браузера и так далее.

Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript . В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript .

Событие	Объект	Причина возникновения
Abort	Image	Прерывание загрузки изображения
Blur		Потеря фокуса элемента
Change	FileUpload, Select, Text, Textarea	Смена значения
Click	Area, Button, Checkbox, Document, Link, Radio, Reset, Submit	Клик мыши на элементе
DblClick	Area, Document, Link	Двойной клик на элементе
DragDrop	Window	Перемещение в окно браузера
Focus	Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window	Установка фокуса на элементе
KeyDown		Нажатие клавиши на клавиатуре
KeyPress	Document, Image, Link, Textarea	Удержание клавиши на клавиатуре
KeyUp	Document, Image, Link, Textarea	Отпускание клавиши на клавиатуре
Load	Document, Image, Layer, Window
MouseDown	Button, Document, Link	Нажата кнопка мыши
MouseMove	Window	Мышь в движении
MouseOut	Area, Layer, Link	Мышь выходит за границы элемента
MouseOver	Area, Layer, Link	Мышь находится над элементом
MouseUp	Button, Document, Link	Отпущена кнопка мыши
Move	Frame	Перемещение элемента
Reset	Form	Сброс формы
Resize	Frame, Window	Изменение размеров
Select	Text, Textarea	Выделение текста
Submit	Form	Передача данных
Unload	Window	Выгрузка текущей страницы

Теперь разберёмся с тем, как использовать события в JavaScript . Существуют, так называемые, обработчики событий . Обработчики событий как раз и определяют, что будет происходить при возникновении определённого события. Обработчики событий в JavaScript имеет следующий общий вид:

OnНазваниеСобытия

То есть вначале идёт приставка "on ", а дальше название события , например, такие обработчики событий : onFocus , onClick , onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript? ". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.

a {
color: blue;
text-decoration: underline;
cursor: pointer;
}


var default_color = "white";

function setTempColor(color) {
document.bgColor = color;
}

function setDefaultColor(color) {
default_color = color;
}

function defaultColor() {
document.bgColor = default_color;
}



Белый
Жёлтый
Зелёный

Давайте разберёмся с этим скриптом, а точнее с уже целой HTML-страницой с поддержкой JavaScript и CSS (другими словами, это пример DHTML ). Вначале идут обычные HTML-теги , с которых начинается любая HTML-страница . Дальше мы создаём стиль, в котором требуем, чтобы все ссылки на данной странице были синего цвета, подчёркнутые, и чтобы указатель мыши на них был в виде "Pointer". Вы, возможно, скажите: "А зачем нужно задавать стиль? Ведь ссылки и так точно такими же и будут". Правильно, ссылки, но у нас ссылок как таковых нет (ведь нет же атрибута href в теге), поэтому они будут простым чёрным текстом по умолчанию (правда, кликать по тексту тоже можно). Поэтому стиль обязателен. Вы можете его убрать и посмотреть, что будет. А ещё лучше, поставьте атрибут href (с любым значением, хоть пустым) и объясните, почему скрипт перестал работать. Дальше уже начинается JavaScript . Мы создаём переменную default_color , отвечающую за цвет по умолчанию. Дальше идут три функции:

Функция setTempColor() отвечает за временное изменение цвета.

Функция setDefaultColor() отвечает за изменение цвета по умолчанию.

Функция defaultColor() устанавливает цвет фона по умолчанию.

Потом идут ссылки с атрибутами в виде обработчиков событий . При наведение мышки на ссылку возникает событие MouseOver , соответственно, обработчик события onMouseOver вызывает функцию setTempColor() и передаёт соответствующий параметр. При снятии мышки с элемента возникает событие MouseOut , а дальше вызывается функция defaultColor() , которая делает цветом фона цвет по умолчанию. И, наконец, при клике мышки по ссылке (обработчик onClick ) вызывается функция setDefaultColor() , которая устанавливает цвет заданный в параметре цветом фона по умолчанию. Как видите, всё достаточно просто.

Это был принцип использования событий в JavaScript , а дальше всё зависит только от Вашей фантазии!

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

В этом уроке :

• Изучение способов применения в скриптах обработчиков событий
• Определение наилучшего обработчика для вашей работы
• Использование событий мыши и кнопки для управления интерактивностью
• Добавление в проект управления с помощью клавиатуры
• Создание самопроигрывающейся презентации при помощи кадровых событий
• Использование событий фильма при создании интерактивного проекта
• Сочетание различных событий для выполнения нужной задачи
• Использование методов как обработчиков событий
• Слушатели и способы их применения

Время выполнения

На выполнение этого урока требуется примерно два часа.

Файлы урока

Файлы-носители :

Стартовый файл :

Lesson02/Assets/MouseEvents1.fla Lesson02/Assets/FrameEvents1.fla Lesson02/Assets/ClipEvents1.fla Lesson02/Assets/OrchestratingEvents1.fla Lesson02/Assets/CarParts1.fla

Законченные проекты :

MouseEvents2.fla FrameEvents2.fla ClipEvents2.fla OrchestratingEvents2.fla CarParts2.fla

Что делают обработчики событий

Обработчики событий ( event handlers ) – это оркестр, исполняющий интерактивную пьесу вашего фильма. Каждый обработчик содержит скрипт , выполняемый только тогда, когда происходит определенное событие. Каждый скрипт в фильме запускается событием – пользователь навел указатель мыши на кнопку или нажал клавишу, или фильм достиг определенного кадра на монтажном столе, и так далее.

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

Когда происходит (типСобытия) { делать то-то; делать то-то; }

События, привязанные к кадрам, происходят, когда монтажный стол при воспроизведении достигает кадра, содержащего скрипт . Для скрипта, помещенного в кадр , не нужен обработчик события – такой скрипт будет выполнен при достижении данного кадра. Так, если бы приведенный выше скрипт был привязан к кадру, он выглядел бы так:

делать то-то; делать то-то;

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

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

Выбор нужного обработчика

Правильное использование обработчиков событий – одна из наиболее сложных проблем, стоящих перед пользователем ActionScript , ведь большинство из нас не задумывается о том, как именно и почему происходят события вокруг нас. А ведь при создании интерактивной среды важно именно это – четко представлять себе, что с чем и как взаимодействует.

Знакомя вас с обработчиками событий Flash , мы будем рассматривать их связь с событиями реального мира. Не забывайте, что во Flash каждому событию соответствует действие (и ответная реакция ).

События мыши

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

Примечание Если вы знакомы с реализацией событий мыши во Flash 5, то знаете, что там их можно было применять только к кнопкам. Во Flash MX же события мыши можно присоединять также к экземплярам фильмов-символов (об этом будет детально рассказано в упражнении).

Нажатие, контакт: on (press)

В реальном мире, если вы к чему-то прикасаетесь или на что-то нажимаете (будь то человек или кубик льда), вы ожидаете реакции: кубик льда начинает таять, человек тоже так или иначе откликается. Обработчик события on(press) служит для имитации событий вроде прикосновений, захватов, нажатий. Этот обработчик используется для запуска скрипта в ситуации, когда указатель наведен на кнопку или фильм-символ и кнопка мыши нажата.

Отпускание, освобождение: on (release)

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

Сдвиг, перетаскивание: on (releaseOutside)

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

Управление с клавиатуры: on (keyPress)

Этим событием можно запрограммировать скрипт, который будет выполняться при нажатии пользователем какой-либо клавиши на клавиатуре. Клавишу можно задать любую – с буквой, цифрой, знаками препинания и