JavaScript для новичков: события и обработчики

Отслеживание событий пользователя

В JavaScript можно отслеживать действия пользователя несколькими способами. В этом уроке рассмотрим использование HTML-атрибутов для вызова JavaScript-функций. Следующий урок посвящён другому методу, основанному на JavaScript.

Простой обработчик события: всплывающее окно

Создадим кнопку с текстом «Нажми на меня». При нажатии будет отображаться всплывающее окно. Используем атрибут onclick.

Внутри onclick можно прописать JavaScript-код или указать имя функции. Сначала рассмотрим первый способ:

<button onclick="alert('Вы нажали на меня')">Нажми на меня</button>

Обратите внимание на одинарные кавычки внутри двойных для корректной обработки строки. Этот способ подходит для небольших фрагментов кода.

Вызов функции при событии

Для сложной логики лучше использовать вызов функции:

<button onclick="onClickButton()">Нажми на меня</button>

Функция onClickButton() определяется в JavaScript-файле:

function onClickButton() {
  alert('Вы нажали на меня');
}

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

Атрибуты событий

Атрибуты событий, такие как onclick, применяются к большинству HTML-тегов (за исключением <script>, <head> и др.). Кроме onclick, существуют:

ondblclick: срабатывает при двойном клике.
onmouseover: срабатывает при наведении курсора.
onmouseout: срабатывает при уведении курсора.
onkeydown: срабатывает при нажатии клавиши.
oninput: срабатывает при вводе текста в текстовое поле.
onload: срабатывает при загрузке страницы.

Многие другие атрибуты используются реже. Рекомендуется попробовать onkeydown и oninput.

Подсчет нажатий на кнопку

Создадим глобальную переменную для подсчета нажатий и выведем результат внутри кнопки:

let counter = 0;

function onClickButton(elm) {
  counter++;
  elm.innerHTML = 'Вы нажали на кнопку ' + counter + ' раз';
  console.log(counter);
}

Параметр elm позволяет получить доступ к объекту кнопки и изменить её содержимое с помощью innerHTML. Глобальная переменная counter сохраняет значение между вызовами функции. Локальная переменная сбросит счётчик при каждом нажатии.

Работа с объектом события

Через параметр elm, переданный в функцию, доступны свойства объекта, например, атрибуты:

console.log(elm.name); // Выведет значение атрибута name
console.log(elm.onclick); // Выведет значение атрибута onclick

Изменение стилей

Можно изменять стили объекта, обращаясь к свойству style:

elm.style.background = 'red';
elm.style.color = '#333';
elm.style.border = '0';
elm.style.borderRadius = '5px';

Или использовать cssText:

elm.style.cssText = 'background:red; color:#333; border:0; border-radius:5px;';

В этом случае предыдущие стили будут перезаписаны.

Работа с текстовым полем и событием oninput

Создадим текстовое поле и будем выводить его содержимое в консоль при каждом вводе текста:

<input type="text" oninput="onInput(this)">

function onInput(elm) {
  console.log(elm.value);
  if (elm.value === 'hello') {
    alert('Привет!');
  }
}

Этот пример демонстрирует отслеживание ввода текста и выполнение действий на основе введённых данных.

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