HTML - События: Пособие для начинающих по созданию интерактивных веб-страниц
Здравствуйте, будущие веб-разработчики! Я рад быть вашим проводником в этом захватывающем путешествии в мир событий HTML. Как someone кто teaching computer science на протяжении более десяти лет, я могу告诉你, что понимание событий похоже на обучение тайному языку веб-интерактивности. Так что погружаемся и вместе открываем этот магический мир!
Что такое события HTML?
Прежде чем мы перейдем к деталям, давайте поймем, что такое события HTML. Представьте, что вы на вечеринке (веб-страница), и каждый раз, когда вы делаете что-то - например, tapped someone на плече (нажимаете кнопку) или шепчет секрет (вводите текст) - это событие. В веб-мире события - это действия или occurrences, которые происходят в вашем браузере, которые ваш HTML может обнаружить и ответить на них. Круто, правда?
Теперь давайте рассмотрим различные типы событий и как их использовать.
Атрибуты событий окна
События окна как дверной звонок к дому вашей веб-страницы. Они говорят вам, когда кто-то arrive или уходит.
Вот таблица.common window событий:
| Событие | Описание |
|---|---|
| onload | Вызывается, когда страница заканчивает загрузку |
| onunload | Вызывается, когда пользователь уходит с страницы |
| onresize | Вызывается, когда окно браузера изменяется в размере |
| onscroll | Вызывается, когда пользователь прокручивает страницу |
Давайте посмотрим пример:
<body onload="alert('Добро пожаловать на мою страницу!')">
<h1>Мой классный веб-сайт</h1>
</body>В этом примере, как только страница загрузится, вы увидите欢迎 alert. Это как приветствовать гостей, когда они заходят!
События формы
Формы - это место, где происходит настоящее взаимодействие. Это как вести разговор с вашими пользователями.
Вот таблица событий формы:
| Событие | Описание |
|---|---|
| onsubmit | Вызывается, когдаформа отправляется |
| onreset | Вызывается, когда форма сбрасывается |
| onchange | Вызывается, когда изменяется значение ввода |
| onfocus | Вызывается, когда элемент receives фокус |
| onblur | Вызывается, когда элемент теряет фокус |
Давайте посмотрим на пример:
<form onsubmit="alert('Форма отправлена!'); return false;">
<input type="text" onchange="this.style.backgroundColor='желтый'">
<input type="submit" value="Отправить">
</form>В этой форме, когда вы изменяете текстовый ввод, он становится желтым ( surprise!), а когда вы отправляете, вы получаете alert. Это как форма отвечает вам!
События клавиатуры
События клавиатуры - это все о том, что происходит, когда ваши пальцы танцуют на клавиатуре.
Вот таблица событий клавиатуры:
| Событие | Описание |
|---|---|
| onkeydown | Вызывается, когда клавиша нажата |
| onkeyup | Вызывается, когда клавиша отпущена |
| onkeypress | Вызывается, когда клавиша нажата и отпущена |
Давайте попробуем пример:
<input type="text" onkeypress="document.body.style.backgroundColor='lightblue'">Каждый раз, когда вы нажимаете клавишу в этом вводе, фоновый цвет страницы становится светло-синим. Это как игра на фортепиано, которое рисует!
События мыши
События мыши - это все о щелчках и движениях.
Вот таблица событий мыши:
| Событие | Описание |
|---|---|
| onclick | Вызывается, когда элемент щелкнут |
| ondblclick | Вызывается, когда элемент дважды щелкнут |
| onmouseover | Вызывается, когда мышь перемещается над элементом |
| onmouseout | Вызывается, когда мышь уходит с элемента |
Давайте посмотрим, как они работают:
<button onclick="this.innerHTML='Щелкнуто!'"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">
Щелкни меня!
</button>Эта кнопка изменяет цвет, когда вы наводите на нее курсор, и изменяет текст, когда вы щелкаете по ней. Это как хамелеонская кнопка!
События перетаскивания
События перетаскивания делают ваши элементы передвигаемыми, как фишки на шахматной доске.
Вот таблица событий перетаскивания:
| Событие | Описание |
|---|---|
| ondrag | Вызывается, когда элемент перетаскивается |
| ondragstart | Вызывается, когда пользователь начинает перетаскивать элемент |
| ondragend | Вызывается, когда пользователь закончил перетаскивать элемент |
Вот простой пример:
<div draggable="true" ondragstart="alert('Перетаскивание началось!')">
Перетащи меня!
</div>Когда вы начинаете перетаскивать этот div, он alert вам. Это как элемент говорит, "Ууу! Я лечу!"
События буфера обмена
События буфера обмена связаны с копированием, вырезанием и вставкой.
Вот таблица событий буфера обмена:
| Событие | Описание |
|---|---|
| oncopy | Вызывается, когда пользователь копирует содержимое |
| oncut | Вызывается, когда пользователь вырезает содержимое |
| onpaste | Вызывается, когда пользователь вставляет содержимое |
Давайте посмотрим пример:
<textarea oncopy="alert('Скопировано!')" oncut="alert('Вырезано!')" onpaste="alert('Вставлено!')">
Попробуйте copied, вырезать или вставить здесь!
</textarea>Этот textarea говорит вам, когда вы выполняете действия с буфером обмена. Это как болтливый блокнот!
События媒и
События媒и для воспроизведения аудио или видео на вашей странице.
Вот таблица событий媒и:
| Событие | Описание |
|---|---|
| onplay | Вызывается, когда媒а начинает воспроизведение |
| onpause | Вызывается, когда媒а приостанавливается |
| onended | Вызывается, когда媒а достигает конца |
Вот быстрый пример:
<audio src="song.mp3" controls onplay="alert('Наслаждайся музыкой!')" onended="alert('Надеюсь, тебе понравилось!')"></audio>Этот аудилемент здоровается с вами, когда вы начинаете воспроизведение, и спрашивает ваше мнение, когда он заканчивается. Это как DJ, который заботится о вашем мнении!
Разные события
Есть много других событий, которые не вписываются в категории. Вот несколько:
| Событие | Описание |
|---|---|
| onerror | Вызывается, когда occurs ошибка |
| oncontextmenu | Вызывается, когда пользователь щелкает правой кнопкой мыши |
| onwheel | Вызывается, когда вращается мышь |
Давайте посмотрим один пример:
<img src="image.jpg" onerror="this.src='default.jpg'">Если изображение не загрузится, оно автоматически заменяется на изображение по умолчанию. Это как иметь запасного танцора, готового выйти на сцену!
И вот и все,folks! Вы только что сделали свои первые шаги в мир событий HTML. Помните, ключ к овладению событиями - это практика. Попробуйте combining diferentes события, experiment с новыми идеями и, что самое главное, наслаждайтесь!
Как я всегда говорю своим студентам, программирование как готовка - сначала вы можете сделать беспорядок, но с практикой вы начнете создавать шедевры в кратчайшие сроки. Так что вперед, начните играть с этими событиями и смотрите, как оживают ваши веб-страницы!
Credits: Image by storyset