<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

События в JavaScript

События в JavaScript

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

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

СобытиеОбъектПричина возникновения
AbortImageПрерывание загрузки изображения
BlurButton, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, WindowПотеря фокуса элемента
ChangeFileUpload, Select, Text, TextareaСмена значения
ClickArea, Button, Checkbox, Document, Link, Radio, Reset, SubmitКлик мыши на элементе
DblClickArea, Document, LinkДвойной клик на элементе
DragDropWindowПеремещение в окно браузера
FocusButton, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, WindowУстановка фокуса на элементе
KeyDownDocument, Image, Link, TextareaНажатие клавиши на клавиатуре
KeyPressDocument, Image, Link, TextareaУдержание клавиши на клавиатуре
KeyUpDocument, Image, Link, TextareaОтпускание клавиши на клавиатуре
LoadDocument, Image, Layer, WindowЗагрузка элемента
MouseDownButton, Document, LinkНажата кнопка мыши
MouseMoveWindowМышь в движении
MouseOutArea, Layer, LinkМышь выходит за границы элемента
MouseOverArea, Layer, LinkМышь находится над элементом
MouseUpButton, Document, LinkОтпущена кнопка мыши
MoveFrameПеремещение элемента
ResetFormСброс формы
ResizeFrame, WindowИзменение размеров
SelectText, TextareaВыделение текста
SubmitFormПередача данных
UnloadWindowВыгрузка текущей страницы

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

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

То есть вначале идёт приставка "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, а дальше всё зависит только от Вашей фантазии!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (14):

Alim_(I) Alim_(I) 07.05.2011 13:26:34

А как делать чтобы если зарегистрировался как у Ваc на сайте например: я зарегистрировался и когда пишу комментарий моё имя отображают и нельзя его поменять, и мэйл тоже. Можете объеснить как так делать? Тоже самое и с комментарием на форуме. И еще можете сказать как информацию хранить. Например: кто-то зарегистрировался потом у него появилась иконка "Добавить комментарий", или что-то другое. Заранее благодарю. =)

Ответить

Alim_(I) Alim_(I) 07.05.2011 13:39:15

Я решил просмотреть Ваше платное видео. Отвечать не обязательно

Ответить

Drug Drug 20.01.2012 01:50:25

<style> a { color: blue; text-decoration: underline; cursor: pointer; } </style> Поправте

Ответить

Admin Admin 20.01.2012 12:13:16

Спасибо, подправил!

Ответить

Кузя1995 Кузя1995 14.06.2012 15:23:51

Вы извините,может я слишком тупой.Но как подвязать HTML и CSS к javascript?Я не до понял

Ответить

Admin Admin 14.06.2012 16:46:58

http://myrusakov.ru/javascript-hello-world.html

Ответить

BotaniQue BotaniQue 08.07.2012 14:02:12

А можно ли использовать событие OnLoad больше одного раза? Например, вставить на сайт анимированный текст и цыфровые часы одновременно. Пробую это сделать, пишу события через запятую, отображается что-то одно - либо текст, либо часы.

Ответить

Admin Admin 08.07.2012 14:14:04

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

Ответить

BotaniQue BotaniQue 08.07.2012 16:21:32

Спасибо большое. Получилось.

Ответить

ilnaz123 ilnaz123 29.03.2013 14:46:55

!

Ответить

Дмитрий184 Дмитрий184 09.05.2013 19:20:03

В таблицу можно добавить события Error и Contextmenu (для полноты списка).

Ответить

neo321654 neo321654 06.06.2013 22:51:52

Добавил href="#" к ссылкам, всё работает без задания стилей. А если оставить пустую, то страница перегружается и setDefaultColor сбрасывается, поэтому скрипт работает некорректно, я прав?

Ответить

Олег Олег 23.06.2013 23:11:39

Почему у <input type = "checkbox" onfocus = "setBlink('blink_news', true);" /> в последнем ХРОМЕ не работает "onfocus"? Причем, если меняю "type" на "text", то все работает.

Ответить

rassardan rassardan 14.03.2016 20:33:27

а такой код не короче? <body> <a>Белый</a> <br> <a onmouseover="setColor('yellow')" onmouseout="setColor('white')" onclick="setColor('red')">Жёлтый</a> <br> <a>Зелёный</a> <script> function setColor(color) { document.bgColor = color; } </script> </body>

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.