Введение в обработку событий в JavaScript

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

В контексте веб-разработки события — это действия или события, происходящие в окне браузера или на веб-странице, которые система может обнаружить и предоставить вам возможность отреагировать. Они могут включать в себя взаимодействия с пользователем, такие как щелчки мышью, нажатия клавиш или более сложные события, такие как загрузка или выгрузка веб-страницы.

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

Слушатели событий

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

Синтаксис addEventListener:

element.addEventListener(event, function, useCapture);

• событие : это строка, определяющая имя события, которое нужно прослушивать.
• function : это функция-обработчик, которая выполняется при возникновении события.
• useCapture : это необязательное логическое значение, указывающее, должно ли событие выполняться на этапе захвата или на этапе всплытия. По умолчанию установлено значение false (всплывающее).

Пример добавления прослушивателя событий:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Этот фрагмент кода добавляет прослушиватель событий к элементу с идентификатором myButton. При нажатии на кнопку срабатывает оповещение.

Типы событий

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

• События мыши :

  • click: срабатывает при щелчке мыши по элементу.
  • mouseenter: срабатывает, когда указатель мыши входит в элемент.
  • mouseleave: срабатывает, когда указатель мыши покидает элемент.

• События клавиатуры :

  • keypress: срабатывает при нажатии клавиши.
  • keydown: срабатывает при нажатии клавиши.
  • keyup: срабатывает при отпускании клавиши.

• События формы :

  • submit: срабатывает при отправке формы.
  • change: срабатывает, когда значение элемента input, select или textarea было изменено.

Практические примеры

Добавление прослушивателей событий к кнопкам и формам:

• Событие нажатия кнопки :

  let button = document.getElementById("clickButton");
  button.addEventListener("click", () => {
      console.log("Button was clicked!");
  });
  

• Событие отправки формы :

  let form = document.getElementById("myForm");
  form.addEventListener("submit", (event) => {
      event.preventDefault(); // Prevent the form from submitting
      console.log("Form submitted!");
  });
  

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

Для практического упражнения учащиеся создадут интерактивную форму, которая реагирует на действия пользователя в режиме реального времени.

Схема упражнения :

1. Создайте простую форму в HTML :

   <form id="liveForm">
       <label for="nameInput">Enter your name:</label>
       <input type="text" id="nameInput" />
       <p id="livePreview"></p>
       <button type="submit">Submit</button>
   </form>
   

2. Добавьте прослушиватели событий для предварительного просмотра в реальном времени :

   document.getElementById("nameInput").addEventListener("input", function() {
       let preview = document.getElementById("livePreview");
       preview.innerText = "Preview: " + this.value;
   });
   

В этом упражнении форма включает поле ввода, где пользователи могут ввести свое имя. Когда пользователь вводит текст, событие ввода запускает обновление элемента абзаца ( livePreview) с предварительным просмотром ввода, демонстрируя, как можно использовать обработку событий для создания адаптивного интерфейса.

Расширенные методы обработки событий

Распространение событий: всплытие и захват

Распространение событий — это механизм, который определяет, как события распространяются или проходят через дерево DOM, чтобы достичь своего целевого элемента и потенциально всплывать или захватываться после достижения цели.

• Всплытие событий (по умолчанию) . На этом этапе событие начинается с самого глубокого, самого внутреннего элемента (цели события), а затем последовательно запускает обработчики на его родительских элементах по направлению к самому внешнему элементу (объекту документа). Это поведение событий по умолчанию.

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

// Example of setting up capturing
document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked - capturing phase");
}, true); // Capturing is enabled

Понимание этих механизмов имеет решающее значение при разработке сложных интерактивных веб-приложений для управления обработкой событий и их распространением через дерево DOM.

Предотвращение действий по умолчанию

Многие элементы DOM имеют поведение по умолчанию, которое может выполняться при определенных событиях. Например, нажатие кнопки отправки в элементе формы обычно обновляет страницу. Вы можете запретить эти действия по умолчанию, используя event.preventDefault()обработчик событий.

• Вариант использования при обработке форм :

  document.getElementById("myForm").addEventListener("submit", function(event) {
      event.preventDefault(); // Prevents the form from submitting
      // Additional code to handle form submission via JavaScript
  });
  

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

Использование thisв событиях

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

document.getElementById("myButton").addEventListener("click", function() {
    console.log(this.textContent); // `this` refers to the button
    this.textContent = "Clicked"; // Changes the button text to 'Clicked'
});

Упражнение: обработка отправки формы с помощью управления распространением событий

Цель : реализовать упражнение, в котором учащимся необходимо остановить распространение события и предотвратить поведение по умолчанию при отправке формы, чтобы обработать ее с помощью JavaScript.

Настраивать :

1. HTML-структура :

   <form id="signupForm">
       <label for="username">Username:</label>
       <input type="text" id="username" name="username">
       <button type="submit">Sign Up</button>
   </form>
   

2. JavaScript :

   document.getElementById("signupForm").addEventListener("submit", function(event) {
       event.preventDefault(); // Prevent default form submission
       event.stopPropagation(); // Stop the event from bubbling up
       let username = document.getElementById("username").value;
       console.log("Signing up user:", username);
       // Additional code to process the username
   });
   

В этом упражнении учащиеся присоединят к форме прослушиватель событий, который предотвращает отправку формы традиционным способом и предотвращает всплеск события в DOM. Этот подход позволяет полностью обрабатывать форму в JavaScript, обеспечивая больший контроль над обработкой данных и потоком взаимодействия. Эта практика укрепляет понимание обработки, распространения событий и предотвращения действий по умолчанию в реальных сценариях.

Введение в веб-хранилище

Обзор веб-хранилища

API веб-хранилища предоставляет механизмы, с помощью которых браузеры могут хранить пары ключ/значение гораздо более интуитивно понятным способом, чем использование файлов cookie. Два механизма в веб-хранилище — это localStorageи sessionStorage, каждый из которых удовлетворяет различные потребности и обеспечивает способы сохранения данных в браузере клиента.

Возможности веб-хранилища :

• Емкость : предлагает больше места для хранения, чем файлы cookie.
• Доступность : сохраненные данные доступны только на стороне клиента, а не на стороне сервера.
• Безопасность . В отличие от файлов cookie, данные веб-хранилища не отправляются с каждым запросом к серверу, но они по-прежнему доступны через JavaScript, что делает их уязвимыми для атак XSS, если они не обрабатываются должным образом.
• Простота : предоставляет простой API с методами установки, получения и удаления элементов.

localStorage против sessionStorage

1. локальное хранилище :

   • Постоянство : данные, хранящиеся в localStorage, не имеют срока годности. Он сохраняется в браузере пользователя до тех пор, пока не будет явно очищен либо с помощью сценария, либо пользователем вручную, очистившим кеш браузера.
   • Вариант использования : идеально подходит для сохранения пользовательских настроек или других данных, которые должны сохраняться даже при закрытии и повторном открытии браузера (например, пользовательская тема, токены входа).

2. хранилище сеанса :

   • Постоянство : данные, хранящиеся в sessionStorage, удаляются при завершении сеанса страницы, то есть при закрытии вкладки браузера. На него не влияют перезагрузки и восстановления страниц.
   • Вариант использования : полезно для данных, которые не должны сохраняться между сеансами, например данных, введенных в форму, которую не следует хранить в течение длительного времени.

Установка, получение и удаление элементов

И localStorage, и sessionStorage предоставляют одни и те же методы, предоставляя простой API для управления сохраненными данными.

• Настройка элементов : setItem(key, value)метод используется для хранения данных, где keyявляется строкой, а valueтакже сохраняется в виде строки.

  localStorage.setItem("username", "JohnDoe");
  

• Получение элементов : getItem(key)метод используется для получения данных. Если ключ не существует, он возвращает null.

  let username = localStorage.getItem("username");  // "JohnDoe"
  

• Удаление элементов : removeItem(key)метод используется для удаления элемента из хранилища.

  localStorage.removeItem("username");
  

• Очистка всех данных : clear()метод можно использовать для очистки всего хранилища.

  localStorage.clear();
  

Практическое упражнение: Создание приложения настройки тем

Цель : создать простое приложение, позволяющее пользователям выбирать цвет темы для веб-сайта, который будет сохраняться во время сеансов с использованием localStorage.

Шаги :

1. Настройка HTML :

   <label>Select your theme color:</label>
   <select id="themeSelector">
       <option value="light">Light</option>
       <option value="dark">Dark</option>
   </select>
   <button onclick="saveTheme()">Save Theme</button>
   

2. Реализация JavaScript :

   function saveTheme() {
       let theme = document.getElementById("themeSelector").value;
       localStorage.setItem("theme", theme);
   }
   
   function loadTheme() {
       let theme = localStorage.getItem("theme");
       if (theme) {
           document.body.className = theme;  // Assuming CSS classes for themes exist
           document.getElementById("themeSelector").value = theme;
       }
   }
   
   window.onload = loadTheme;  // Load the theme when the document loads
   

Результаты обучения :

• Студенты научатся взаимодействовать с localStorageсистемой для установки, получения и управления данными.
• Они поймут, как применять постоянное хранилище данных для улучшения пользовательского опыта, запоминая пользовательские предпочтения во время сеансов браузера.

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

Объединение обработки событий с веб-хранилищем

Пример интерактивного приложения: список дел

Одним из наиболее наглядных примеров сочетания обработки событий с веб-хранилищем является создание приложения списка дел. Это приложение позволит пользователям добавлять задачи, отмечать их как выполненные и сохранять состояние списка во время сеансов браузера с помощью localStorage.

Особенности приложения :

1. Добавить задачи : пользователи могут вводить задачи в поле ввода и добавлять их в список, нажав кнопку или нажав Enter.
2. Пометить задачи как выполненные : пользователи могут нажимать на задачи, чтобы переключать статус их завершения.
3. Постоянство : состояние списка дел сохраняется в папке localStorage, поэтому оно остается неизменным даже после закрытия и повторного открытия браузера или вкладки.

HTML-структура :

<div id="todoApp">
    <input type="text" id="newTask" placeholder="Add a new task" />
    <button onclick="addTask()">Add Task</button>
    <ul id="taskList"></ul>
</div>

CSS для выполненных задач (для визуальной обратной связи):

.completed {
    text-decoration: line-through;
}

JavaScript для обработки событий и локального хранилища :

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    let taskList = document.getElementById('taskList');
    taskList.innerHTML = ''; // Clear existing tasks in the DOM
    tasks.forEach((task, index) => {
        let li = document.createElement('li');
        li.textContent = task.description;
        li.className = task.completed ? 'completed' : '';
        li.addEventListener('click', () => toggleTask(index));
        taskList.appendChild(li);
    });
}

function addTask() {
    let newTaskInput = document.getElementById('newTask');
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    if (newTaskInput.value) {
        tasks.push({ description: newTaskInput.value, completed: false });
        localStorage.setItem('tasks', JSON.stringify(tasks));
        newTaskInput.value = ''; // Clear input field
        loadTasks(); // Refresh the list
    }
}

function toggleTask(index) {
    let tasks = JSON.parse(localStorage.getItem('tasks'));
    tasks[index].completed = !tasks[index].completed;
    localStorage.setItem('tasks', JSON.stringify(tasks));
    loadTasks();
}

window.onload = loadTasks; // Load tasks when the document is ready

Упражнение: улучшение интерактивной формы

Учащиеся улучшат интерактивную форму, созданную ими ранее, путем включения функций, позволяющих сохранять вводимые пользователем данные в файлы localStorage. Это позволит получить данные при перезагрузке формы.

Возможности для реализации :

1. Сохранение входных данных : каждый раз, когда пользователь изменяет поле в форме, сохраняйте данные в формате localStorage.
2. Получить данные при загрузке : при загрузке формы (например, при обновлении страницы) заполните поля формы данными, хранящимися в файлах localStorage.

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

HTML :

<form id="preferenceForm">
    <input type="email" id="email" placeholder="Enter your email">
    <input type="color" id="favoriteColor" title="Choose your favorite color">
    <button type="submit">Save Preferences</button>
</form>

JavaScript :

document.getElementById('preferenceForm').addEventListener('change', function(event) {
    localStorage.setItem(event.target.id, event.target.value);
});

function loadPreferences() {
    document.getElementById('email').value = localStorage.getItem('email') || '';
    document.getElementById('favoriteColor').value = localStorage.getItem('favoriteColor') || '#ffffff'; // Default to white
}

window.onload = loadPreferences;

Это упражнение поможет учащимся понять, как эффективно сочетать обработку событий с localStorageсозданием динамичных, удобных для пользователя веб-приложений, которые запоминают вводимые пользователем данные во время сеансов, что значительно повышает удобство работы с пользователем.

Original text

Rate this translation

Your feedback will be used to help improve Google Translate