От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с событиями в JavaScript. Именно благодаря событиям наше приложение становится интерактивным и может взаимодействовать с пользователем. Начнем?
Прежде всего нас интересуют события мыши, поэтому мы и начнем именно с них. Вот типичные события мыши:
click — событие клика основной (левой) кнопки мыши;
mouseover — событие, которое возникает в момент, когда курсор мыши наводится на искомый элемент страницы (например, кнопка);
mousemove — событие движения мыши;
mousedown — событие нажатия кнопки мыши;
mouseup — событие отжатия кнопки мыши (возникает после события mousedown);
contextmenu — событие клика контекстной (правой) кнопки мыши.
Для каждого из этих событий мы можем назначить свою функцию, которую называют обработчиком. Эта функция будет выполнена в момент наступления события, на которое повешена (назначена) функция. При этом JavaScript предлагает несколько способов назначения функции (обработчика) для того или иного события.
Начнем с наиболее частого события, которое нам интересно в первую очередь — событие клика основной кнопки мыши. Давайте создадим обычную кнопку и повесим на нее функцию обработчик. Вот самый простейший вариант, с помощью атрибута onclick:
|
1 |
<button onclick="console.log('Hello')">Click me</button> |
Теперь при каждом клике по кнопке в консоль будет выводиться строка Hello:
Если нам нужно выполнить более сложный код, тогда будет правильнее описать функцию-обработчик, которую и вызываем в атрибуте onclick. Например, давайте при каждом клике по кнопке добавлять параграф с текстом после кнопки:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container" id="container"> <button onclick="creteElem()">Click me</button> </div> <script> function creteElem(){ var elem = document.getElementById('container'); var p = document.createElement('p'); p.textContent = 'Lorem ipsum dolor sit amet.'; elem.appendChild(p); } </script> |
Как видим, достаточно просто. Мы также можем использовать и другой способ назначения обработчика для элемента. Вместо использования атрибута onclick в коде тега, мы можем использовать свойство onclick в коде JS, где опишем функцию. Пример:
|
1 2 3 4 5 6 7 |
<button id="btn">Click me</button> <script> var btn = document.getElementById('btn') btn.onclick = function(){ console.log('Hello'); }; </script> |
Теперь при каждом клике по кнопке мы увидим в консоли счетчик вывода строки Hello.
На этом мы, пожалуй, остановимся. В следующих статьях мы вернемся к событиям в JavaScript и работе с ними. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!
