JavaScript события

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

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

Если кратко говоря, то это возможность сделать взаимодействие пользователя со страницей, к примеру, когда он нажимает на определённую клавишу и страница как то изменяется.

Объявление событий:

Всего есть три способа для объявления события, через HTML атрибут, через метод, через функцию addEventListener(), рассмотрим их все.

JS события через HTML атрибуты:

Перед тем как показать такой способ, нужно сказать, что он уже не используется и считается дурным тоном, но в некоторых JS фреймворках, например в React.js используется подобный механизм.

Вот не большой пример кода.

Вам тут надо просто кликнуть на текст, тогда у вас появится сообщение
с надписью, «Вы кликнули на тег p»

На самом деле это всё что нужно знать о таком способе.

JS события через методы:

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

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

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

Теперь осталось перечислить, какие методы есть.

  • onclick — Клик мышью;
  • oncontextmenu — Клик правой кнопкой мыши;
  • onmousemove — Перемещение мыши на элементе;
  • onmouseup — Отпускание кнопки мыши;
  • onmousedown —  Нажатие на кнопку мыши;
  • onkedown — Нажатие на клавишу;
  • onkeyup — Отпускание клавиши;
  • onkeypress — Зажатие клавиши;

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

JS события через addEventListener:

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

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

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

Вот вам весь список событий которые нужно вписывать в первый параметр:

  • click — Клик мышью;
  • contextmenu — Клик правой кнопкой мыши;
  • mousemove — Перемещение мыши на элементе;
  • mouseup — Отпускание кнопки мыши;
  • mousedown —  Нажатие на кнопку мыши;
  • kedown — Нажатие на клавишу;
  • keyup — Отпускание клавиши;
  • keypress — Зажатие клавиши;

Возможно вы заметили, но все названия событий, почти точно такие же, как и название методов, но без приставке «on».

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

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

Поделится:

Дополнительно: