Что такое событие в javascript

События в Javascript

HTML события это такая "вещь", которая временами происходит с HTML элементами.

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

При использовании на HTML странице скрипта JavaScript он может реагировать на эти события.

Вот несколько примеров HTML событий:

  • HTML страница закончила загружаться
  • Поле ввода было изменено
  • Пользователь нажал на HTML кнопку

Часто, при возникновении HTML события необходимо что-то сделать. JavaScript позволяет при обнаружении нужного события выполнить необходимый код. Для этого у HTML элементов есть специальные атрибуты обработчики событий, в которые и можно добавить JavaScript код:

С одинарными кавычками:
<элемент событие=’код JavaScript‘>

С двойными кавычками:
<элемент событие >

В следующем примере элементу button добавлен атрибут onclick с JavaScript кодом:

В приведенном примере при нажатии пользователем на кнопку код JavaScript изменит содержимое элемента с id="demo" и выведет в него текущую дату и время.

В следующем примере JavaScript код изменит содержимое самого элемента (используется команда this.innerHTML):

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

Часто используемые HTML события

Ниже приводится список некоторых часто используемых HTML событий:

Событие Описание
onchange HTML элемент был изменен
onclick Пользователь кликнул мышкой на HTML элемент
onmouseover Пользователь навел мышку на HTML элемент
onmouseout Пользователь вывел мышку за пределы HTML элемента
onkeydown Пользователь нажал на клавишу клавиатуры
onload Браузер закончил загружать страницу

Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.

Что может делать JavaScript с событиями?

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

События

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

События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать. По аналогии со светофором: видим зелёный свет, едем дальше &#128678;

События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и т.д.

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

Как пишется

Существует два способа обработать события:

  • с помощью on -свойств DOM-элементов
  • методом addEventListener

on -свойства DOM-элементов

Большинство событий связаны с DOM-элементами. Если пользователь кликнул на кнопку, то событие click связано с конкретным DOM-элементом — кнопкой, на которой кликнул пользователь.

Каждый DOM-элемент имеет большой набор свойств, которые начинаются на on :

  • onclick
  • onscroll
  • onkeypress
  • onmouseenter
  • и так далее

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

Чтобы перестать обрабатывать событие, нужно записать в свойство значение null .

Метод addEventListener

&#129302; Если обрабатывать события с помощью on -свойств, то получится добавить только одну функцию-обработчик на каждый элемент. Часто одного обработчика недостаточно. Чтобы не создавать ограничение на пустом месте, используют альтернативный метод подписки на события — метод addEventListener .

Метод вызывается у DOM-элемента. Аргументами нужно передать тип события (справочная информация) и функцию, которую нужно выполнить:

Как понять

Функция-обработчик

Функция-обработчик, или просто обработчик, — это функция, которая вызывается браузером при наступлении события.

При вызове браузер передаёт в обработчик объект события с помощью аргумента.

Объект события — это JavaScript-объект с информацией о событии. В объекте события есть как общие свойства (тип события, время события), так и свойства, которые зависят от типа события (например, на какую кнопку нажал пользователь).

Чтобы работать с объектом события, нужно добавить параметр в объявление обработчика:

Помимо объекта события, внутри функции можно использовать ключевое слово this . Оно позволяет получить DOM-элемент, на котором сработал обработчик. Это позволяет создать обработчик один раз, но привязать её к нескольким DOM-элементам.

Например, мы объявим обработчик в виде именованной функции и повесим её на нажатие нескольких кнопок. При клике на кнопку будем менять её цвет:

Всплытие событий

Рассмотрим пример. У нас есть div элемент, в который вложено видео. Мы подписались на события click как на div , так и на video . Если событие происходит на div , то мы меняем его цвет на случайный из списка. Если событие происходит на video , то мы запускаем видео. Попробуйте кликнуть на коробку:

&#129302; Обрати внимание, что событие срабатывает на обоих элементах — цвет фона меняется и запускается видео. Этому есть объяснение, оно называется всплытие событий (event bubbling).

Когда пользователь совершает действие, браузер ищет самый вложенный элемент, к которому относится событие. Затем это событие передаётся родительскому элементу и так далее до самого корня DOM.

В нашем примере мы кликнули на video , это самый вложенный элемент. Браузер создал событие и мы обработали его в коде. После этого браузер передаёт событие родителю video (то есть элементу, который содержит video ) — элементу div . Мы получаем его и обрабатываем. И он всплывает дальше, пока не дойдёт до body .

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

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

Всплытие события можно остановить с помощью метода stopPropagation у объекта события:

На практике

Николай Лопин

&#128736; Всегда подписывайся на события с помощью addEventListener , так ты избежишь доработок, когда потребуется повесить несколько обработчиков на одно и то же событие.

&#128736; Если нужно обработать все события определённого типа, вызови метод addEventListener у объекта window :

&#128736; Если не используешь объект события в обработчике, то не указывай его в списке параметров обработчика. Вместо function (event) <…>напиши function() <…>.

&#128736; Всплытие событий — важный концепт, попробуй с ним поэкспериментировать.

События в JavaScript

События в JavaScript

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

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

Событие Объект Причина возникновения
Abort Image Прерывание загрузки изображения
Blur Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window Потеря фокуса элемента
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 Document, Image, Link, Textarea Нажатие клавиши на клавиатуре
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", а дальше название события, например, такие обработчики событий: onFocus, onClick, onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript?". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.

<html>
<head>
<style>
a <
color: blue;
text-decoration: underline;
cursor: pointer;
>
</style>
<script language = ‘javascript’>
var default_color = "white";

function setTempColor(color) <
document.bgColor = color;
>

function setDefaultColor(color) <
default_color = color;
document.bgColor = default_color;
>

function defaultColor() <
document.bgColor = default_color;
>
</script>
</head>
<body>
<a onMouseOver = "setTempColor(‘white’);" onMouseOut = "defaultColor()" onClick = "setDefaultColor(‘white’);">Белый</a>
<a onMouseOver = "setTempColor(‘yellow’);" onMouseOut = "defaultColor()" onClick = "setDefaultColor(‘yellow’);">Жёлтый</a>
<a onMouseOver = "setTempColor(‘green’);" onMouseOut = "defaultColor()" onClick = "setDefaultColor(‘green’);">Зелёный</a>
</body>
</html>

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

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

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

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

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

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

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

Ваш адрес email не будет опубликован.