JavaScript - DOM Events: A Beginner's Guide
Привет, будущие кодировщики! Сегодня мы отправимся в увлекательное путешествие в мир событий DOM JavaScript. Не волнуйтесь, если вы никогда раньше не писали ни строчки кода - я буду вашим дружелюбным проводником, и мы вместе исследуем эту захватывающую тему. Так что возьмите кружку вашего любимого напитка, устройтесь поудобнее и погружайтесь с нами!
Что такое DOM Events?
Прежде чем мы перейдем к конкретным типам событий, давайте поймем, что такое DOM Events. Представьте, что вы на вечеринке (конечно, кодинг-вечеринке!). Каждый раз, когда что-то происходит - кто-то arrives, меняется песня или кто-то проливает напиток - это "событие". В мире веб-разработки DOM Events похожи. Это вещи, которые происходят с HTML-элементами на веб-странице, такие как щелчок по кнопке или наведение мыши на изображение.
Теперь давайте рассмотрим некоторые常见的 типы событий и узнаем, как их использовать!
Тип события onclick
Событие onclickprobably是最常见的事件类型您会遇到。 Это происходит, когда пользователь щелкает по HTML-элементу. Давайте посмотрим на простой пример:
<button id="myButton">Нажми меня!</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("Ты нажал кнопку!");
}
</script>В этом примере у нас есть кнопка с идентификатором "myButton". JavaScript-код выбирает эту кнопку с помощью document.getElementById("myButton"), а затем assigns a function к его свойству onclick. Когда кнопка нажата, она вызывает alert с сообщением "Ты нажал кнопку!"
Совет: Попробуйте этот код сами! Создайте HTML-файл, вставьте это туда и откройте его в браузере. Вždy лучше увидеть, как это работает в действии!
Тип события ondblclick
Теперь, что если мы хотим, чтобы что-то произошло при двойном щелчке пользователя? Вот где полезен тип события ondblclick. Вот пример:
<p id="myParagraph">Двойной щелчок, чтобы изменить мой цвет!</p>
<script>
document.getElementById("myParagraph").ondblclick = function() {
this.style.color = "red";
}
</script>В этом случае, когда вы двойной щелчок по абзацу, цвет текста изменяется на красный. Слова this referr к элементу, который инициировал событие (в данном случае, абзац).
Тип события onkeydown
Перейдя от событий мыши к событиям клавиатуры, давайте рассмотрим событие onkeydown. Это событие срабатывает, когда нажата клавиша на клавиатуре. Вот забавный пример:
<input id="myInput" type="text">
<p id="output"></p>
<script>
document.getElementById("myInput").onkeydown = function(event) {
document.getElementById("output").innerHTML = "Ты нажал: " + event.key;
}
</script>Этот код создает поле ввода и абзац. Каждый раз, когда вы нажимаете клавишу, пока фокус на поле ввода, абзац обновляется, чтобы показать, которую клавишу вы нажали. Объект event содержит информацию о событии, включая, какая клавиша была нажата (event.key).
События onmouseenter и onmouseleave
Эти события как игра в прятки с курсором мыши! onmouseenter срабатывает, когда курсор мыши enters элемент, а onmouseleave - когда он покидает элемент. Давайте посмотрим, как они работают:
<div id="myBox" style="width: 200px; height: 200px; background-color: yellow;">
Наведи на меня!
</div>
<script>
let box = document.getElementById("myBox");
box.onmouseenter = function() {
this.style.backgroundColor = "green";
this.innerHTML = "Здравствуйте!";
}
box.onmouseleave = function() {
this.style.backgroundColor = "yellow";
this.innerHTML = "Наведи на меня!";
}
</script>Этот код создает желтый ящик, который изменяется на зеленый и здоровается, когда вы наводите на него курсор, а затем возвращается, когда курсор уходит. Это как будто ящик стесняется и хочет поздороваться, только когда вы близко!
HTML 5 Standard DOM Events
HTML5 introduced一大堆新的标准事件. Давайте посмотрим на несколько интересных:
Событие onDrag
<div id="dragMe" draggable="true" style="width: 100px; height: 100px; background-color: blue;">
Перетащи меня!
</div>
<div id="dropZone" style="width: 200px; height: 200px; border: 2px dashed black;">
Брось сюда!
</div>
<script>
let dragElement = document.getElementById("dragMe");
let dropZone = document.getElementById("dropZone");
dragElement.ondragstart = function(event) {
event.dataTransfer.setData("text", event.target.id);
}
dropZone.ondragover = function(event) {
event.preventDefault();
}
dropZone.ondrop = function(event) {
event.preventDefault();
let data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>Этот пример демонстрирует функциональность перетаскивания. Вы можете перетащить синий ящик и бросить его в прерывистую зону. Он использует несколько событий: ondragstart, ondragover, и ondrop.
События onOnline и onOffline
Эти события срабатывают, когда браузер detectst, что интернет-соединение установлено или потеряно:
<p id="status">Ваш статус подключения появится здесь.</p>
<script>
window.addEventListener("online", function() {
document.getElementById("status").innerHTML = "Вы снова в сети!";
});
window.addEventListener("offline", function() {
document.getElementById("status").innerHTML = "Ой, вы офлайн.";
});
</script>Этот скрипт обновляет абзац, чтобы告诉 вам, онлайн вы или офлайн. Попробуйте это, выключив Wi-Fi!
Summary of Event Types
Вот удобная таблица, резюмирующая типы событий, которые мы обсуждали:
| Тип события | Описание | Пример использования |
|---|---|---|
| onclick | Срабатывает при щелчке по элементу | Кнопочные щелчки, переключение элементов |
| ondblclick | Срабатывает при двойном щелчке по элементу | Открывание/закрывание панелей, увеличение/уменьшение |
| onkeydown | Срабатывает при нажатии клавиши | Проверка форм, клавиатурные shortcuts |
| onmouseenter | Срабатывает при входе мыши в элемент | Показ подсказок, подсветка элементов |
| onmouseleave | Срабатывает при выходе мыши из элемента | Скрытие подсказок, сброс стилей элемента |
| ondragstart | Срабатывает при начале перетаскивания элемента | Инициация операций перетаскивания |
| ondrop | Срабатывает при бросании перетаскиваемого элемента | Завершение операций перетаскивания |
| online | Срабатывает при обнаружении браузером интернет-соединения | Обновление UI для онлайн-статуса |
| offline | Срабатывает при обнаружении браузером потери интернет-соединения | Обновление UI для офлайн-статуса |
И вот мы и добрались до финиша, друзья! Мы прошли через страну событий DOM JavaScript, от простых щелчков до магии перетаскивания. Помните, лучший способ учиться - это делать, так что не бойтесь экспериментировать с этими примерами и создавать свои собственные. Кто знает? Может быть, вы создадите下一个 большой интерактивный веб-приложение!
Счастливого кодирования, и пусть ваши события всегда обрабатываются аккуратно!
Credits: Image by storyset