Типы событий. События в JavaScript Действия по умолчанию

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

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

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

Что такое события?

В общем, все, что вы создаете, может быть смоделировано следующим заявлением:

Вы можете заполнить пробелы в этом заявлении бесчисленным множеством вещей. Первый пробел сообщает, что что-то происходит. Второй пробел описывает реакцию на это. Вот несколько примеров заполнения этого заявления:

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

Не существует никакого способа обойти эту модель, так что … нет никакого смысла и пытаться. Вместо этого, вам нужно глубже изучить эту очень полезную вещь, известную как событие.

Событие это не более чем сигнал. Он сообщает, что что-то только что произошло. Этим что-то может быть нажатие кнопки мыши. Это может быть нажатие клавиши на клавиатуре. Это может быть изменение размера вашего окна. Это может быть просто только что произошедшая загрузка вашего документа.

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

Возвращаемся к нашей модели. События составляют первую половину заявления:

События определяют вещь, которая происходит. Они посылают сигнал. Вторая часть модели определяет реакцию на событие:

В конце концов, какая польза от сигнала, если на той стороне нет никого, кто ожидает его, а затем предпринимает соответствующие действия?! Хорошо — теперь, когда у вас есть достаточное понимание того, что такое события, давайте посмотрим, как протекает жизнь событий в заповеднике, известном как JavaScript .

События и JavaScript

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

• Отслеживание событий;
• Реакция на события.

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

1. Отслеживание событий

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

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

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

То, как вы используете эту функцию, выглядит следующим образом:

source.addEventListener(eventName, eventHandler, false);

Давайте проанализируем, что означает каждая из частей этой функции.

Источник

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

Имя события

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

Событие	Событие происходит…
click	…когда вы нажимаете и отпускаете основную кнопку мыши / трекпада / и т.д.
mousemove	…когда курсор мыши перемещается.
mouseover	…когда вы наводите курсор мыши на элемент. Это событие, как правило, используется при выделении объектов!
mouseout	…когда курсор мыши покидает область элемента.
dblclick	…когда вы кликаете мышью дважды.
DOMContentLoaded	…когда DOM вашего элемента полностью загружен.
load	…когда весь ваш документ (DOM, дополнительные элементы: изображения, скрипты и т.д.) полностью загружены.
keydown	…когда вы нажимаете клавишу на клавиатуре.
keyup	… когда вы отпускаете клавишу на клавиатуре.
scroll	…когда вы прокручиваете элемент.
wheel & DOMMouseScroll	…каждый раз, когда вы используете колесико мыши для прокрутки вверх или вниз.

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

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

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

Захватывать или не захватывать, вот в чем вопрос!

Последний аргумент может принимать значения true или false .

Подытоживаем все выше сказанное

Теперь, когда вы познакомились с функцией addEventListener , давайте подытожим все с помощью одного реального примера:

document.addEventListener("click", changeColor, false);

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

2. Реакция на события

Как было рассказано в предыдущем разделе, отслеживание (прослушивание ) событий обрабатывается функцией addEventListener . После того, как событие зафиксировано, оно должно быть обработано обработчиком событий. Я не шутил, когда я упомянул ранее, что обработчик событий — это не что иное, как функция:

function normalAndBoring() { // Мне очень нравятся всякие разные вещи, которые могут быть внутри этой функции! }

Единственное различие между стандартной функцией и той, которая указана в качестве обработчика события, является то, что обработчик событий специально вызывается по имени в вызове addEventListener :

document.addEventListener("click", changeColor, false); function changeColor() { // Я важна!!! }

Любой код, который вы размещаете внутри обработчика событий, будет выполняться, когда в addEventListenerfunction зафиксировано нужное вам событие. Это довольно просто!

Простой пример

Лучший способ понять то, что мы узнали только что — увидеть все это на примере полностью рабочего кода. Чтобы мы двигались параллельно, добавьте следующую разметку и код в HTML -документ:

Click Anywhere! document.addEventListener("click", changeColor, false); function changeColor() { document.body.style.backgroundColor = "#FFC926"; }

Изначально, если вы просмотрите документ в браузере, то увидите просто пустую страницу:

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

Причину этого довольно легко понять. Давайте посмотрим на код:

Вызов addEventListener идентичен тому, что мы уже рассматривали, так что давайте пропустим этот этап. Вместо этого обратите внимание на обработчик событий changeColor :

document.addEventListener("click", changeColor, false); function changeColor() { document.body.style.backgroundColor = "#FFC926"; }

Эта функция вызывается, когда в документе зафиксировано событие click . Когда вызывается эта функция, она задает ярко-желтый цвет фона элемента body . Связывая это с заявлением, которое мы рассматривали в самом начале, мы увидим, что этот пример будет выглядеть так:

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

Аргументы событий и тип события

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

function myEventHandler(e) { // элементы обработчика событий }

На данный момент, обработчик событий — это все еще старая добрая функция. Но это то, что нам и нужно, это функция, которая принимает один аргумент … аргумент события!

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

События - это действия, которые JavaScript может отследить.

Реакция на Событие

Пример ниже показывает дату, когда была нажата кнопка:

События

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

Каждый элемент на веб странице имеет определенные события, которые могут приводить в действие JavaScript. Например, мы можем использовать событие onClick элемента button, чтобы запустить функцию, когда пользователь нажимает по этой кнопке. Мы определяем события в HTML тегах.

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

Перемещение мыши над "горячей зоной" на веб странице

Выбор поля ввода на HTML форме

Отправка данных с HTML формы

Нажатие на клавишу

Замечание: События обычно используются вместе с функциями, и функция не будет выполняться пока не произойдет событие!

onLoad и onUnload

События onLoad и onUnload происходят, когда пользователь заходит или покидает страницу.

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

Оба события onLoad и onUnload также часто используются, когда мы имеем дело с cookies, которые должны быть установлены, когда пользователь заходит или покидает страницу. Например, вы могли бы сделать всплывающее окно, спрашивающее имя пользователя, когда он впервые заходит на вашу страницу. Имя часто сохраняется в cookie. В следующий раз, когда посетитель зайдет на вашу страницу, вы могли бы создать другое всплывающее окно, например: "Добро пожаловать Вася Иванов!".

onFocus, onBlur и onChange

События onFocus, onBlur и onChange часто используются при проверке полей формы.

Ниже пример того, как использовать событие onChange. Функция checkEmail() будет вызвана как только пользователь меняет значение поля:

onMouseOver

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

Способность javaScript создавать динамические html страницы базируется на трех столпах. Два из них уже были рассмотрены в предыдущих статьях. А третий - это события.

• Управление окнами браузера - с помощью объекта window.
• Управление объектами внутри окна - DOM.
• Выполнение кода javaScript по событиям.

Событие - реакция компьютера на действие пользователя. Например, с т.з. javaScript событием считается нажатие кнопки клавиатуры, движение и нажатие кнопок мыши, закрытие окна браузера. Все события с т.з. javaScript генерируются объектами документа и браузера (нет понятия ‘пользователя’). Например, при клике на параграф событие клика мышки генерируется объектом – параграф.

Чтобы можно было запустить какой-то код на javaScript, реагирующий на события, надо связать этот код с событием, генерируемым от определенного объекта, т.е. с определенным событием от определенного объекта. Такое действие называют - подписка на событие.

Подписка означает, что мы привязываем функцию к определенному событию от определенного объекта в объектной модели браузера. И когда этот объект создаст (сгенерирует) это событие, то автоматически сработает эта функция.

• onclick - нажатие кнопки мышки.
• ondblclick - двойное нажатие кнопки мышки.
• onmousedown - кнопка мышки нажата (опущена вниз).
• onmousemove - мышка двигается по объекту (возникает множество событий, движение мышки по 1px = 1 событие).
• onmouseout - мышка уходит с объекта.
• onmouseover - мышка наезжает на нужный объект.
• onmouseup – кнопка мышки отпущена (поднята вверх).
• onkeydown – кнопка клавиатуры нажата (опущена вниз).
• onkeypress – нажатие кнопки клавиатуры.
• onkeyup – кнопка клавиатуры отпущена (поднята вверх).
• onblur – потеря фокуса ввода (мигающий курсор).
• onfocus - момент получения фокуса ввода данным элементом.
• onchange – генерируется элементом управления, после потери фокуса, если изменился текст (например, в текстовом поле). Исключение - элемент списка ‘select’, в нем это событие генерируется сразу, а не после потери фокуса.
• onload - генерируется, когда в окне закончилась загрузка страницы. Обычно используют, когда надо запустить какой-то javaScript код после полной загрузки страницы.
• onunload – возникает перед тем, как документ будет выгружен из окна (т.е. когда закрываем этот документ или переходим на другой документ).
• onreset – форма сброшена.
• onsubmit – форма данных отправлена.

Подписка на события

• Подписка через javaScript. Такой метод используют в большинстве случаев. Сначала надо найти объект того элемента, на событие от которого хотим подписаться, например, через метод getElementById (указать нужному элементу идентификатор id).

function myFunc () { //создали простую функцию alert ("hello" ); } function pageInit () { var p= document. getElementById ("1" ); p. onclick= myFunc; } //вызвали функцию на срабатывание события window. onload= pageInit; //событие сработает, когда загрузится страница < p id= 1 > Параграф 1 //задали id для параграфа

• Подписка через код html. Недостаток такого метода в том, что засоряется код html своим кодом javaScript; кроме того, есть несколько ограничений, и в сложных случаях неудобно использовать.

< script type= "text/javascript" > function myFunc () { //создали простую функцию alert ("hello" ); } < p onclick= "myFunc()" > Параграф 2 //вызвали функцию Модель обработки событий

Когда возникает событие у какого-либо элемента, то аналогичные события должны возникать и у всех его родительских элементов до самого верха страницы (до ‘body’, т.к. он является главной областью документа). Следовательно, любое событие, возникающее на странице, возникает в body.

Тогда возникает вопрос, в каком порядке такие события будут возникать? В современных браузерах модель обработки событий называется ‘модель всплывающего пузырька’. Ее суть: сначала возникает событие у того элемента, на который кликнули, потом у его родителя, и так далее до самого верха - до ‘body’.

Element --> element 2 --> document --> window

Параметры событий (объект event)

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

Основные свойства данного объекта:

• x, y - координаты мышки в момент возникновения события.
• clientX, clientY - то же самое.
• offsetX, offsetY - то же самое, но это смещение мышки относительно родительского элемента.
• screenX, screenY - координаты экрана.
• button - какую кнопку мыши нажали (0 - не нажато, 1 - нажата левая кнопа, 2 - нажата правая кнопка, 4 - нажата средняя кнопка).
• keyCode - числовой код нажатой клавиши клавиатуры.
• srcElement - элемент, который сгенерировал событие.
• fromElement - элемент, с которго мышка съехала.
• toElement - указание на объект, на который мышка наехала.
• cancelBubble - нестандартный способ, если дать ему значение true, то отменится ‘всплывающий пузырек’; или можно подменить код клавиши, которую нажал юзер.

Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в 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 , а дальше всё зависит только от Вашей фантазии!

Рассмотрим наиболее стандартные и часто используемые javaScript события:

Обработчик
события

Поддерживающие HTML- элементы и объекты

Описание

Получение элементом фокуса

	a, area, button, input, label, select, textarea	Потеря текущим элементом фокуса. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
	Input, select, textarea	Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
	Практически все	Одинарный щелчок (нажата и отпущена кнопка мыши)
	a, area, button, input, label, select, textarea
	Практически все	Нажата кнопка мыши в пределах текущего элемента
	Практически все	Курсор мыши выведен за пределы текущего элемента
	Практически все	Курсор мыши наведен на текущий элемент
	Практически все	Отпущена кнопка мыши в пределах текущего элемента
		Перемещение окна
		Изменение размеров окна
		Выделение текста в текущем элементе
		Отправка данных формы
		Попытка закрытия окна браузера и выгрузки документа

Событие onLoad. Свойства высоты и ширины объекта в javaScript

Для выполнения следующего примера нам понадобится новое понятие — событие.

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

Рассмотрим одно из самых распространенных событий — onload — которое происходит при загрузке документа (когда пользователь своими действиями вызвал загрузку веб-страницы).

Рассмотрим пример использования события javascript onload для изменения ширины и высоты элемента.

Пример: Добавить на страницу изображение и при помощи javascript при наступлении события загрузки страницы сделать ширину изображения соответствующей ширине окна браузера.

✍ Решение:

function resizeImg() { var myImg= document.getElementById ("img1" ) ; myImg.style .width = document.body .clientWidth ; } ...

function resizeImg(){ var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; } ...

В примере основные действия происходят в функции resizeImg() :

переменная myImg ассоциирована с тегом img — картинкой, свойство которой width — ширина — меняется в самой функции.

Вызов функции происходит по загрузке страницы в событии onload тела документа (тело — body — главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).

Задание Js8_4. Разместите в html-коде несколько изображений (тег img). Используя метод измените:
— размер (свойства width и height) всех изображений страницы
— размер границы (свойство border) всех изображений.

Дополните код:

var allImg=document...; // получаем массив изображений for (var i=0; i < allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }

Событие onclick javaScript и три способа обработки событий

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

Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»

Через свойство объекта с использованием пользовательской функции:

Скрипт:

В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут onclick («по щелчку» ), в значении которого стоит вызов функции с названием message() . Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.

Скрипт при такой обработке события обычно находится в области head документа

Через атрибут тега:

Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
В качестве атрибута кнопки указывается onclick («по щелчку» ), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (javascript:). В нашем случае оператор для вывода модального окна со словом «Ура!»

Через регистрацию функции-обработчика в качестве свойства элемента:

html-код:

Скрипт:

document.myForm .myButton .onclick = message; function message() { alert("Ура!" ) ; }

document.myForm.myButton.onclick = message; function message() { alert("Ура!"); }

В html-коде здесь присутствует кнопка с атрибутом id , который необходим для обращения к кнопке через скрипт.

В скрипте, который обязательно находится ниже дерева элементов (можно перед закрытием тега body), находится обращение к кнопке (document.myForm.myButton), для которой назначается обработчик события onclick со значением ссылки на функцию . Обращение к кнопке может быть организовано через атрибут id (document.getElementById("myButton").onclick = message;)

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

Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.

Как лучше выводить результаты примеров?

Важно: При вызове document.write после окончания загрузки страницы (при обработке событий onclick , oninput , …), страница перезапишется, поэтому вызывать этот метод не рекомендуется . Для примеров лучше использовать метод alert() .

document.write добавляет html во время построения DOM

alert блокируют выполнение JS, пока пользователь не нажмёт OK

Рассмотрим все простые способы вывода отладочной информации :

document.innerHTML += "htmlstr"; // добавляет на страницу

console.log("str"); // выводит в консоль браузерах

Задание Js8_5. Выполните задание по инструкции:

Создайте веб-страницу и расположите в ней тег img с изображением грустного смайлика.

Щелчок на изображении (onclick) вызывает заданный метод (пользовательская функция):

В скрипте опишите метод (функция sayHello()), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):

function sayHello() { var userName= prompt("Как вас зовут?" ) ; if (userName) { alert(...) ; document.getElementById ("smileImg" ) . ...= ...; } }

function sayHello() { var userName=prompt("Как вас зовут?"); if(userName){ alert(...); document.getElementById("smileImg"). ...=...; } }

=>>

События onMouseOver и onMouseOut

Событие наступает при наведении (onMouseOver) на объект и при выведении (onMouseOut) за пределы объекта курсора мыши.

Назначение обработчика событий осуществляется точно таким же образом, как и в случае .

Поэтому выполним задание:

Задание Js8_6. По наведению курсора мыши на гиперссылки закрашивать задний фон страницы в разные цвета.

Дополните код:

Зеленый
… seagreen
… magenta
… purple
… navy
… royalblue

Задание Js8_7. Создание rollover-изображения

— Добавьте в код тег img с изображением.
— Введите обработчики событий onmouseover (по наведению) и onmouseout (при отведении). Сделайте это в виде функций.
— Присоедините к обработчику событий onmouseover процедуру загрузки в тег img другого изображения.
— Присоедините к обработчику событий onmouseout процедуру загрузки другого изображения в тег img .

Несколько обработчиков одного и того же события

В javascript можно назначать НЕСКОЛЬКО обработчиков одного и того же события. Для этого используются методы:

addEventListener — добавление обработчика

removeEventListener — удаление обработчика

Синтаксис addEventListener :

У метода три аргумента:

Element.addEventListener(event, handler[, phase]);

event click

handler — функция-обработчикgetElementById ("MyElem" ) ; input.addEventListener ("click" , message) ;

function message() { alert("Ура!"); } var input = document.getElementById("MyElem"); input.addEventListener("click", message);

Синтаксис removeEventListener :

Методу следует передать те же аргументы, что были у addEventListener :

Element.removeEventListener(event, handler[, phase]);

event — название события, например, click

handler — функция-обработчик

phase — необязательный аргумент, «фаза», на которой обработчик должен сработать

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

function message() { alert("Ура!"); } var input = document.getElementById("MyElem"); input.addEventListener("click", message); input.removeEventListener("click", message);

Всплытие и погружение события

obj.onevent = function(e) {/*...*/} // где e - объект события // e.target - элемент, на котором произошло событие