В последней части учебника про основы языка программирования JavaScript, вы узнаете как создать событие и как с ними работать
Что такое события:
Если кратко говоря, то это возможность сделать взаимодействие пользователя со страницей, к примеру, когда он нажимает на определённую клавишу и страница как то изменяется.
Объявление событий:
Всего есть три способа для объявления события, через HTML атрибут, через метод, через функцию addEventListener()
, рассмотрим их все.
JS события через HTML атрибуты:
Перед тем как показать такой способ, нужно сказать, что он уже не используется и считается дурным тоном, но в некоторых JS фреймворках, например в React.js используется подобный механизм.
Вот не большой пример кода.
1 | <p onclick="alert('Вы кликнули на тег p')">На меня надо нажать</p> |
Вам тут надо просто кликнуть на текст, тогда у вас появится сообщение
с надписью, «Вы кликнули на тег p»
На самом деле это всё что нужно знать о таком способе.
JS события через методы:
Теперь перейдём к более часто использованному типу, через специальные методы, рассмотрим сначала похожий пример.
1 2 3 4 5 6 7 | <p>На меня надо нажать</p> <script> let p = document.querySelector("p"); p.onclick = function() { alert("Вы кликнули на тег p"); } </script> |
Будет тоже самое, как и в прошлый раз, но этот способ более популярный.
Также одна из его особенностей в том, что благодаря ему, вы можете делать вложенные событие, например, это пригодится для создания Drag&Drop, если вам это интересно, то переходите по ссылки.
Теперь осталось перечислить, какие методы есть.
- onclick — Клик мышью;
- oncontextmenu — Клик правой кнопкой мыши;
- onmousemove — Перемещение мыши на элементе;
- onmouseup — Отпускание кнопки мыши;
- onmousedown — Нажатие на кнопку мыши;
- onkedown — Нажатие на клавишу;
- onkeyup — Отпускание клавиши;
- onkeypress — Зажатие клавиши;
Это не все доступные события, но самые популярные, их вы будите использовать чаще всего.
JS события через addEventListener:
Этот способ лично мне больше всего нравится, на мой взгляд он наиболее удобный, вот всё та же программа.
1 2 3 4 5 6 7 | <p>На меня надо нажать</p> <script> let p = document.querySelector("p"); p.addEventListener("click", function() { alert("Вы кликнули на тег p"); }); </script> |
Давайте рассмотрим функцию, которая добавляет обработчик событий, она имеет два параметра, первый, это название самого события, второй, это функция которая будет работать, когда срабатывает событие, в остальном всё точно также как и в прошлых примерах.
Ещё надо сказать, что его нельзя вкладывать в другие события, поэтому подойдёт только если вам надо обработать одно событие.
Вот вам весь список событий которые нужно вписывать в первый параметр:
- click — Клик мышью;
- contextmenu — Клик правой кнопкой мыши;
- mousemove — Перемещение мыши на элементе;
- mouseup — Отпускание кнопки мыши;
- mousedown — Нажатие на кнопку мыши;
- kedown — Нажатие на клавишу;
- keyup — Отпускание клавиши;
- keypress — Зажатие клавиши;
Возможно вы заметили, но все названия событий, почти точно такие же, как и название методов, но без приставке «on».
Вывод:
В этой последней части учебника, мы рассмотрели, как создать событие в JavaScript, и основы работы с ними.