JavaScript: От Основ до Full-Stack Разработки

Отправить

javascriptlet myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(event) {

event.preventDefault(); // Отменяем стандартное поведение формы (перезагрузка страницы)

console.log("Форма отправлена (но не перезагрузили страницу).");

// Здесь мы можем обработать данные формы с помощью JavaScript

let formData = new FormData(myForm); // Получаем данные формы

let dataValue = formData.get('data'); // Получаем значение поля 'data'

console.log("Данные из формы:", dataValue);

});

Без event.preventDefault() при нажатии на кнопку “Отправить” страница бы перезагрузилась.

event.stopPropagation(): Останавливает всплытие (или погружение) события. Обработчики на родительских элементах не будут вызваны.Пример 8.5.2: Остановка всплытияhtml

javascriptlet parentDiv = document.getElementById('parent');

let childButton = document.getElementById('childBtn');

parentDiv.addEventListener('click', function() {

console.log("Клик по РОДИТЕЛЮ.");

});

childButton.addEventListener('click', function(event) {

console.log("Клик по РЕБЕНКУ.");

event.stopPropagation(); // Останавливаем всплытие события

console.log("Всплытие остановлено.");

});

Если кликнуть на кнопку “Ребенок”:

Сначала выполнится обработчик кнопки (“Клик по РЕБЕНКУ.”).

Затем event.stopPropagation() прервет всплытие.

Обработчик родительского div (“Клик по РОДИТЕЛЮ.”) НЕ выполнится.

Если бы stopPropagation() не было, то после клика по кнопке, событие всплыло бы к div, и выполнился бы и его обработчик.

Практическое задание:

Создайте HTML-страницу с кнопкой (id="toggleTextBtn") и параграфом (id="textToToggle").При нажатии на кнопку, добавьте или удалите класс hidden у параграфа.

CSS для .hidden { display: none; }.

Используйте addEventListener для события click на кнопке.

Создайте поле ввода () и пустой параграф (

).Слушайте событие input на поле ввода.

В обработчике, обновите текст параграфа greetingOutput, показывая введенное значение: “Привет, [введенное имя]!”.

Создайте список (

). В нем несколько элементов
• .Используйте делегирование событий, чтобы при клике на любой
• он подчеркивался (добавлялся класс completed).

  CSS для .completed { text-decoration: line-through; }.

  Убедитесь, что работает и для уже существующих, и для новых элементов

• (подумайте, как добавить новый элемент через JS и чтобы на него тоже действовало).

  Создайте форму с полем ввода и кнопкой “Поиск”.Добавьте обработчик события submit на форму.

  Используйте event.preventDefault(), чтобы отменить стандартную отправку формы.

  Внутри обработчика, получите значение поля ввода и выведите его в консоль.

  Создайте два вложенных элемента: div (родитель) и button (ребенок).Прикрепите обработчик события click к родителю и выведите “Клик по родителю”.

  Прикрепите обработчик события click к кнопке. Внутри него выведите “Клик по кнопке” и вызовите event.stopPropagation().

  Проверьте, что происходит при клике на кнопку, а что при клике на область родителя вне кнопки.

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

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

  Глава 9: Асинхронность: Работа с Временем и Ожиданием.

  В предыдущих главах мы писали код, который выполнялся синхронно. Это значит, что инструкции выполнялись последовательно, одна за другой. Если одна инструкция требовала много времени (например, загрузка большого файла с сервера), вся программа “зависала” до тех пор, пока эта инструкция не завершится. В веб-разработке это неприемлемо – пользователь не должен ждать, пока загрузится картинка, или пока скрипт выполнит долгую операцию.

  Термин: Синхронное выполнение (Synchronous Execution) – инструкции выполняются строго по порядку. Каждая последующая инструкция ждет завершения предыдущей.

  Термин: Асинхронное выполнение (Asynchronous Execution) – инструкции могут выполняться “параллельно” или вне основного потока выполнения. Программа не ждет завершения долгой операции, а продолжает выполнять другие задачи, получая результат асинхронной операции позже.

  Конец ознакомительного фрагмента.

  Текст предоставлен ООО «Литрес».

  Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.

  Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.