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