Мастерство в использовании атрибутов событий HTML

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создание HTML-документа

Создайте новый файл с именем index.html и добавьте базовую структуру HTML.

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

Добавление кнопки

Добавьте элемент button в body вашего HTML-документа. Дайте ему какой-то текст для отображения и атрибут id, чтобы мы могли ссылаться на него в нашем коде JavaScript.

<button id="myButton">Click Here</button>

Добавление атрибута события

Добавьте атрибут onclick к элементу button. В этом атрибуте мы укажем код JavaScript, который должен выполняться при нажатии на кнопку.

<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>

Добавление более сложной функциональности

Добавьте элемент div в body вашего HTML-документа. Этот элемент будет использоваться для отображения текста при нажатии на кнопку.

<div id="myDiv"></div>

Далее, добавьте код JavaScript для обновления текста элемента div при нажатии на кнопку.

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Click Here
</button>
<div id="myDiv"></div>

Обработка отправки формы

Добавьте HTML-форму в body вашего HTML-документа. Также добавьте атрибут onsubmit к форме, чтобы указать код JavaScript, который должен выполняться при отправке формы.

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Использование слушателей событий

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

Во - первых, удалите атрибуты onclick и onsubmit из ваших HTML-элементов.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Далее, создайте функцию JavaScript, которая будет вызываться при нажатии на кнопку. Эта функция должна обновлять текст элемента div.

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

Наконец, прикрепите слушатель событий к кнопке с использованием JavaScript.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

Удаление слушателей событий

Мы также можем удалять слушатели событий с использованием JavaScript.

Добавьте новую кнопку в ваш HTML-документ. Эта кнопка удалит слушатель события клика с первой кнопки.

<button id="removeButton">Remove Click Event Listener</button>

Далее, создайте новую функцию JavaScript, которая удалит слушатель события клика с первой кнопки.

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

Наконец, прикрепите слушатель событий к новой кнопке, который вызовет функцию removeClickListener() при нажатии.

<button id="removeButton">Remove Click Event Listener</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

Резюме

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

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